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

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《如何实现 CSS 过渡动画中高度自动撑起的动画效果？》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

css 过渡动画高度变化问题

问题：

在给定的 js bin 中，当

标签显示后，.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 高度慢慢变化的动画效果。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何实现 CSS 过渡动画中高度自动撑起的动画效果？》文章吧，也可关注golang学习网公众号了解相关技术文章。