css 过渡动画高度变化问题
问题：
在给定的 js bin 中，当
标签显示后，.box 元素的高度会被自动撑起，但没有动画效果。如何实现点击按钮后，.box 高度慢慢变化的动画效果？
答案：
立即学习“前端免费学习笔记（深入）”；
css 动画不支持 height: auto，因此需要使用 javascript 获取 .box 元素的实际高度，并在点击按钮时切换高度，从而实现动画效果。
具体实现步骤：
- 在 css 中设置 .box 元素的背景颜色为蓝色，隐藏溢出内容，并设置过渡动画：
.box {
background-color: blue;
overflow: hidden;
transition: all 1s;
}- 在 javascript 中获取 .box 元素的自动高度：
const autoh = $('.box').height();- 初始化 .box 元素的高度为 0：
$('.box').height(0);- 添加点击按钮事件，在点击时切换高度：
$('.button').click(function() {
$('.box').height(h ^= autoH);
});- 其中 h ^= autoh 是一个位异或操作，用于在 0 和 autoh 之间切换高度。
通过这种方式，就可以实现点击按钮后，.box 高度慢慢变化的动画效果。
