渐进式高度过渡动画
问题：
在 html 中，一个包含文本的
标签被隐藏在
元素中。当
标签显示时，
元素的高度会突然增大。如何实现
元素的高度在
标签显示时以动画方式逐渐增加？
解决方案：
立即学习“前端免费学习笔记（深入）”；
css 动画不支持 height: auto。因此，我们需要使用 javascript 来动态获取
元素的实际高度，然后在点击按钮时交替设置高度为 0 和实际高度。
以下示例代码说明了如何实现此效果：
html：
我是文本
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);
});在这个代码示例中：
- 我们使用 javascript 获取 元素的实际高度并将其存储在 autoh 变量中。
- 我们将
元素的初始高度设置为 0，将其隐藏。- 当按钮被点击时，javascript 将 h 变量的值从 0 切换到 autoh 或从 autoh 切换到 0。
- css 过渡效果将负责以平滑的动画方式逐渐增大或减小
元素的高度。 - 我们将
