Vue3实战：如何用Transition+Velocity实现高度不固定的平滑展开收起效果（附完整代码）-CSDN博客

Vue3实战：告别生硬切换，用Transition与Velocity.js打造动态高度的丝滑展开收起

在构建现代Web应用时，交互的流畅度直接关系到用户体验的品质。你是否遇到过这样的场景：一个内容区域需要展开和收起，但里面的内容高度是动态变化的——可能是用户评论列表、可折叠的详情面板，或是根据筛选条件实时变化的搜索结果。如果简单地使用 v-show 或 v-if 切换，元素会瞬间出现或消失，视觉上非常突兀；而如果使用CSS的 max-height 配合 transition，又常常因为需要预设一个足够大的 max-height 值，导致收起动画初期速度过慢，展开动画末期速度过快，缺乏“物理感”的流畅。

这正是许多Vue开发者，尤其是从中级向高级进阶时，会遇到的典型痛点。我们追求的不再仅仅是“功能实现”，而是“优雅的实现”。本文将带你深入Vue 3的 Transition 组件与业界知名的Velocity.js动画库，手把手构建一个能够智能适应动态内容高度、动画曲线自然平滑的展开收起组件。我们将绕过那些预设固定高度的“玩具示例”，直面真实开发中内容高度不确定、相邻布局需要联动的复杂情况，最终交付一套可直接复用的高质量解决方案。

1. 核心原理：为何CSS Transition在动态高度面前力不从心

在深入代码之前，我们必须理解问题的根源。CSS transition 属性非常擅长在已知的、确定的数值之间进行补间动画，例如从 height: 0 到 height: 300px。然而，在动态高度场景下，我们面临两个核心挑战：

高度值未知：在组件挂载或内容更新前，我们无法预先知道内容的准确高度。无法设置明确的 height 起始或结束值。
auto 值的限制：CSS无法对 height: auto 进行过渡动画。从 0 直接切换到 auto 或反之，都不会产生动画效果，仍然是瞬间切换。

社区常见的“取巧”方案是使用 max-height。思路是设定一个远大于实际内容高度的 max-height（例如 1000px），然后让其在 0 和这个大值之间过渡。

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.content.expanded {
  max-height: 1000px;
}

这个方案的致命缺陷在于动画曲线失真。由于过渡的是 max-height，浏览器会在 0 到 1000px 的整个区间内均匀地计算过渡值。这意味着：

在展开初期，实际内容高度可能只有 100px，但动画已经“跑”到了 300px，视觉上会有一段“空白”的、缓慢的拉伸。
在收起末期，内容高度早已变为 0，但动画还在从 100px 向 0 “跑”，导致最后一段收尾异常缓慢。

这种体验与用户对“折叠”的物理直觉相悖。我们需要的，是动画速度与当前实时高度相匹配的精准控制。

提示：JavaScript动画库（如Velocity.js、GSAP）的优势正在于此。它们可以在每一帧动画中，动态计算并设置元素的样式属性，从而实现基于实时尺寸的、物理效果更逼真的动画。

2. 技术选型：Vue Transition 与 Velocity.js 的强强联合

Vue 3的 Transition 组件提供了一套声明式的钩子，完美契合组件生命周期的动画需求。而Velocity.js是一个高性能的JavaScript动画引擎，其API简洁，性能接近CSS动画，且功能更强大。

2.1 Vue Transition 的 JavaScript 钩子

<Transition> 组件不仅支持CSS类名触发，更提供了六个用于集成JavaScript动画库的钩子事件：

@before-enter
@enter
@after-enter
@before-leave
@leave
@after-leave

这些钩子函数会在动画的不同阶段被调用，并接收对应的DOM元素和一个 done 回调函数。我们的策略是：在 @enter 和 @leave 钩子中，使用Velocity.js来执行高度动画，并在动画完成后手动调用 done() 通知Vue动画结束。

2.2 Velocity.js 的核心优势

相比于直接操作 element.style.height 并配合 requestAnimationFrame，Velocity.js带来了三大好处：

颜色和变换动画：虽然本文聚焦高度，但Velocity同样支持颜色、transform等属性的动画，未来扩展性强。
链式调用与队列：可以轻松创建复杂的动画序列。
性能优化：内部进行了优化，尤其在连续动画中能避免布局抖动。

安装Velocity.js非常简单：

npm install velocity-animate
# 或
yarn add velocity-animate

2.3 设计思路与组件接口

我们将创建一个名为 CollapseTransition 的Vue组件。它的设计目标如下：

接受动态内容：内部插槽的内容可以是任何VNode，高度由内容决定。
控制展开状态：通过一个 show 的 prop 进行控制。
平滑动画：展开和收起时，高度过渡平滑，速度曲线符合预期。
布局友好：