css 过渡动画疑难解答
在 CSS 中，过渡动画常用于在元素属性发生变化时平滑地进行。然而，当涉及到高度时，可能会遇到一些问题。
问题：
在一个 JS Bin 中，当显示一个包含文本的 <p> 标签时，它的高度会撑起其父元素 .box。即使为 .box 设置了 transition: all .5s 的过渡，Height 变化时，动画效果也不如预期。希望当高度发生变化时，.box 能缓慢增加高度，而不是突然撑高。
解答：
立即学习“前端免费学习笔记（深入）”；
CSS 动画不支持 height: auto。因此，为了实现平滑的动画效果，可以使用 JavaScript 获取 .box 的实际高度，然后在点击按钮时切换高度。
CSS 代码：
.box {
background-color: blue;
overflow: hidden;
transition: all 1s;
}JavaScript 代码：
const autoH = $('.box').height();
let h = 0;
$('.box').height(0);
$('.button').click(function() {
$('.box').height(h ^= autoH);
});在这种情况下，.box 在加载时高度为 0。当点击按钮时，JavaScript 代码会将高度切换为 .box 的实际高度和 0 之间。由于设置了过渡，高度的变化会以动画形式平滑地发生。
