在现代网页开发中，用户体验的重要性不断提升，尤其是在涉及动态内容展示时，动画的流畅性成为关键。为了提高展开和收回动画的平滑度，避免卡顿，开发者通常面临的问题是如何处理动画过程中高度的变化。常见的卡顿问题通常是由于 max-height 的固定值，浏览器需要动态计算内容高度，导致动画看起来不够流畅。
本文将介绍如何通过调整 height 属性，而非使用固定的 max-height，来解决这一问题，实现更加平滑的动画效果。具体方法是使用 height: auto 和 height: 0 之间的过渡，这样浏览器可以根据内容的实际高度自动调整动画的时间和效果。
解决方案：实现动态高度的过渡动画
为了改进过渡动画的流畅性，我们需要确保动画的高度变化基于内容的实际高度，而不是预设的最大高度。这可以通过在进入和离开时动态获取元素的高度，并使用 scrollHeight 来计算和应用高度变化，从而确保动画更加自然、连贯。
具体实现步骤
下面的示例代码展示了如何在 Vue.js 中修改过渡动画，使其根据内容的实际高度动态调整。
1. 更新 <transition> 代码：
代码语言：html复制<transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
<view v-if="openedModules[module.id]" class="sub-modules">
<view class="sub-modules-layout">
<view class="sub-module-card" v-for="(subModule) in module.subModules" :key="subModule.id">
<image class="sub-module-icon" :src="subModule.icon"></image>
<view class="sub-module-info">
<text class="sub-module-name">{{ subModule.name }}</text>
</view>
</view>
</view>
</view>
</transition>2. 在 methods 中添加过渡钩子函数：
代码语言：javascript复制methods: {
toggleModule(moduleId) {
this.$set(this.openedModules, moduleId, !this.openedModules[moduleId]);
},
beforeEnter(el) {
el.style.height = '0';
el.style.opacity = '0';
},
enter(el) {
const height = el.scrollHeight; // 获取内容的实际高度
el.style.transition = 'height 0.3s ease-out, opacity 0.3s ease-out';
el.style.height = height 'px'; // 设置为内容的高度
el.style.opacity = '1';
},
leave(el) {
el.style.transition = 'height 0.3s ease-out, opacity 0.3s ease-out';
el.style.height = '0';
el.style.opacity = '0';
},
}3. 删除不再需要的 max-height 样式：
代码语言：css复制/* 删除原有的 max-height 样式，避免影响流畅度 */
.expand-enter-active, .expand-leave-active {
transition: none;
}关键解释
- 过渡钩子函数：
beforeEnter: 进入前，将元素的height设为0，透明度设为0，准备展开。enter: 动态获取元素的实际内容高度（通过scrollHeight），并设置动画的时间、过渡效果及最终状态（高度为内容高度，透明度为1）。leave: 当元素离开时，过渡地将高度从当前值减小到0，并逐渐降低透明度。
- 动态高度的优势：与使用固定的
max-height不同，scrollHeight能够让浏览器根据内容的实际高度进行动态计算。这不仅让动画显得更加平滑，也提高了复杂内容展示时的性能。
总结
通过这些优化，展开和收回动画的流畅度得到了显著提升。相比使用固定 max-height 的方案，动态获取内容高度的方式能确保动画无缝、自然过渡，避免了因高度变化不精准而导致的动画卡顿问题。这种技术尤其适用于动态内容较多的页面，能够显著提升用户体验。
这种方法在实际项目中的运用不仅能提高页面的交互质量，也为动画性能优化提供了更多可能。
