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

文章不知道大家是否熟悉？今天我将给大家介绍《CSS 过渡动画如何实现 `height: auto` 元素的平滑变化？ 》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

CSS 过渡动画疑难解答

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

问题：

在一个 JS Bin 中，当显示一个包含文本的 <p> 标签时，它的高度会撑起其父元素 .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` 元素的平滑变化？ 》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！