如何实现 CSS 过渡动画中高度自动撑起的动画效果？

css 过渡动画高度变化问题

问题：

在给定的 js bin 中，当 <p> 标签显示后，.box 元素的高度会被自动撑起，但没有动画效果。如何实现点击按钮后，.box 高度慢慢变化的动画效果？

答案：

css 动画不支持 height: auto，因此需要使用 javascript 获取 .box 元素的实际高度，并在点击按钮时切换高度，从而实现动画效果。

具体实现步骤：

1. 在 css 中设置 .box 元素的背景颜色为蓝色，隐藏溢出内容，并设置过渡动画：

.box {
  background-color: blue;
  overflow: hidden;
  transition: all 1s;
}

2. 在 javascript 中获取 .box 元素的自动高度：

const autoh = $('.box').height();

3. 初始化 .box 元素的高度为 0：

$('.box').height(0);

4. 添加点击按钮事件，在点击时切换高度：

$('.button').click(function() {
  $('.box').height(h ^= autoH);
});

5. 其中 h ^= autoh 是一个位异或操作，用于在 0 和 autoh 之间切换高度。

通过这种方式，就可以实现点击按钮后，.box 高度慢慢变化的动画效果。