CSS 动画无法响应高度变化，如何实现盒子高度平滑过渡？

大家好，今天本人给大家带来文章《CSS 动画无法响应高度变化，如何实现盒子高度平滑过渡？ 》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

CSS 过渡动画无法响应高度变化

如题中所述，当 p 标签展开时，盒子高度被撑起，但未应用指定的平滑过渡动画。这是因为 CSS 动画不支持高度为 auto 的元素。

解决方案

要实现盒子高度变化时的过渡动画，可以采用以下方式：

1. 使用 JavaScript 获取盒子实际高度 autoH。
2. 使用 CSS 设置 overflow:hidden，防止盒子内容溢出。
3. 使用 transition 属性设置动画。
4. 使用 JavaScript 在点击按钮时切换盒子高度，使其在 0 和 autoH 之间变化。

代码示例

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

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

通过这些步骤，可以实现盒子高度变化时的平滑过渡动画。

理论要掌握，实操不能落！以上关于《CSS 动画无法响应高度变化，如何实现盒子高度平滑过渡？ 》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！