CSS动画失效：为什么我的高度过渡动画不平滑？

CSS动画失效：高度过渡动画为何不流畅？

许多开发者在运用CSS过渡动画时，常常遇到动画效果不佳的问题。本文将针对一个实际案例进行分析，解释为何transition属性无法实现预期的平滑高度变化，并提供有效的解决方案。

问题：当一个元素显示后，其父元素.box的高度随之改变，但CSS中的transition: all .5s却无法触发平滑过渡，高度变化显得生硬。开发者期望.box的高度能够平滑过渡到新的高度，而非瞬间变化。

根本原因在于CSS动画与height: auto属性的冲突。当.box的高度由height: auto控制时，CSS动画无法对其进行平滑过渡。这是因为height: auto会根据内容动态调整高度，而transition属性需要明确的初始值和目标值才能计算动画。

解决方案：为了实现平滑过渡，我们需要避免使用height: auto。我们可以通过JavaScript获取.box的实际高度，然后用JavaScript控制.box的高度变化，配合CSS的transition属性实现平滑过渡。

具体实现：

首先，在CSS中设置.box的overflow: hidden属性，并定义过渡动画：

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

然后，使用JavaScript获取.box的实际高度，并通过点击按钮控制.box的高度切换：

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

这段JavaScript代码首先获取.box的实际高度autoH，然后将.box的高度初始化为0。点击按钮时，代码会切换.box的高度，在0和autoH之间切换，配合CSS的transition属性，实现平滑的高度过渡动画效果。 这种方法巧妙地绕过了height: auto带来的问题，实现了预期的动画效果。