CSS 过渡动画如何实现 `height: auto` 元素的平滑变化？

css 过渡动画疑难解答

在 CSS 中，过渡动画常用于在元素属性发生变化时平滑地进行。然而，当涉及到高度时，可能会遇到一些问题。

问题：

在一个 JS Bin 中，当显示一个包含文本的

标签时，它的高度会撑起其父元素 .box。即使为 .box 设置了 transition: all .5s 的过渡，Height 变化时，动画效果也不如预期。希望当高度发生变化时，.box 能缓慢增加高度，而不是突然撑高。

解答：

CSS 动画不支持 height: auto。因此，为了实现平滑的动画效果，可以使用 JavaScript 获取 .box 的实际高度，然后在点击按钮时切换高度。

CSS 代码：

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

JavaScript 代码：

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

在这种情况下，.box 在加载时高度为 0。当点击按钮时，JavaScript 代码会将高度切换为 .box 的实际高度和 0 之间。由于设置了过渡，高度的变化会以动画形式平滑地发生。

以上就是CSS 过渡动画如何实现 `height: auto` 元素的平滑变化？的详细内容，更多请关注其它相关文章！