在Vue.js项目里，合理的过渡动画能让界面交互更丝滑，避免元素突然显示或隐藏带来的突兀感。Vue官方已经内置了过渡相关的组件和机制，不需要额外引入复杂的动画库，就能实现大部分常见的过渡效果。
Vue过渡动画的核心：transition组件
Vue提供了<transition>组件，用于给单个元素或组件添加进入和离开的过渡效果。当元素被v-if、v-show控制显示隐藏，或者动态组件切换时，<transition>会自动检测元素的状态变化，添加对应的CSS类名，我们只需要定义这些类名的样式就能实现过渡。
基础过渡的CSS类名规则
<transition>在不同阶段会添加以下6个CSS类名，我们可以按需定义样式：
- v-enter：进入过渡的开始状态，元素插入前生效，插入后下一帧移除
- v-enter-active：进入过渡的生效状态，定义过渡的时间、曲线等属性，整个进入过程生效
- v-enter-to：进入过渡的结束状态，元素插入后下一帧生效，过渡完成后移除
- v-leave：离开过渡的开始状态，离开过渡触发时立即生效
- v-leave-active：离开过渡的生效状态，定义离开过渡的时间、曲线等属性，整个离开过程生效
- v-leave-to：离开过渡的结束状态，离开过渡触发后下一帧生效，过渡完成后移除
如果给<transition>添加了name属性，比如name="fade"，那么类名的前缀会从v-变成fade-，例如fade-enter-active。
简单淡入淡出过渡示例
下面是一个点击按钮控制文本显示隐藏的淡入淡出过渡示例：
<template>
<div id="app">
<button @click="show = !show">切换显示</button>
<transition name="fade">
<p v-if="show">这是需要过渡的文本</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
}
}
</script>
<style>
/* 定义过渡的生效状态，设置过渡时间和曲线 */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s ease;
}
/* 进入开始和离开结束的状态，透明度为0 */
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>多元素与列表过渡
多元素过渡
如果需要给多个元素添加过渡，需要注意Vue的过渡模式，避免两个元素同时进入离开导致的闪烁问题。<transition>的mode属性可以设置过渡模式：
in-out：新元素先进入，完成后旧元素离开out-in：旧元素先离开，完成后新元素进入
多元素过渡需要给每个元素设置唯一的key属性，让Vue能区分不同的元素。
<template>
<div>
<button @click="isOn = !isOn">切换状态</button>
<transition name="fade" mode="out-in">
<button v-if="isOn" key="on">开</button>
<button v-else key="off">关</button>
</transition>
</div>
</template>列表过渡：transition-group组件
当需要对列表元素（比如v-for渲染的元素）添加过渡时，需要使用<transition-group>组件。它和<transition>的区别是，会渲染一个真实的DOM元素作为容器，默认是<span>，可以通过tag属性指定容器标签。
列表过渡除了进入和离开的过渡，还支持位置移动的过渡，需要定义.v-move相关的类名，设置移动过渡的属性。
<template>
<div>
<button @click="addItem">添加项</button>
<transition-group name="list" tag="ul">
<li v-for="item in list" :key="item.id">
{{ item.text }}
</li>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
nextId: 1
}
},
methods: {
addItem() {
this.list.push({
id: this.nextId++,
text: `列表项 ${this.nextId - 1}`
})
}
}
}
</script>
<style>
.list-enter-active, .list-leave-active {
transition: all 0.5s ease;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}
.list-move {
transition: transform 0.5s ease;
}
</style>结合JavaScript钩子实现复杂过渡
如果CSS过渡无法满足需求，比如需要结合第三方动画库（如GSAP）实现复杂动效，可以使用<transition>的JavaScript钩子函数。常用的钩子有：
@before-enter：进入过渡前触发@enter：进入过渡时触发，需要手动调用done回调表示过渡结束@after-enter：进入过渡完成后触发@before-leave：离开过渡前触发@leave：离开过渡时触发，需要手动调用done回调表示过渡结束@after-leave：离开过渡完成后触发
使用JavaScript钩子时，建议在<transition>上添加:css="false"，告诉Vue跳过CSS过渡的检测，避免冲突。
// 结合GSAP实现进入动画的示例
export default {
methods: {
beforeEnter(el) {
el.style.opacity = 0
el.style.transform = 'translateY(20px)'
},
enter(el, done) {
// 假设引入GSAP的gsap对象
gsap.to(el, {
opacity: 1,
y: 0,
duration: 0.5,
onComplete: done // 动画完成后调用done，通知Vue过渡结束
})
},
leave(el, done) {
gsap.to(el, {
opacity: 0,
y: 20,
duration: 0.5,
onComplete: done
})
}
}
}过渡动画的常用注意事项
- 初始渲染过渡：如果需要元素首次渲染时就触发进入过渡，可以在
<transition>上添加appear属性 - 动态过渡：可以通过绑定
name属性或者钩子函数，根据不同状态动态切换过渡效果 - 性能优化：尽量使用
transform和opacity等不会触发重排的CSS属性实现过渡，提升动画性能 - 列表过渡的key：
<transition-group>的子元素必须设置唯一的key，否则过渡效果可能异常
Vue.js过渡动画transition组件animation动态过渡修改时间：2026-06-02 04:41:10