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 动画无法响应高度变化，如何实现盒子高度平滑过渡？的详细内容，更多请关注其它相关文章！