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带来的问题，实现了预期的动画效果。
以上就是CSS动画失效：为什么我的高度过渡动画不平滑？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1002
