Vue 在过渡过程中会自动添加和移除 CSS 类名。理解这 6 个类名是掌握 Vue 过渡系统的基础。
v-enter → 进入的开始状态
v-enter-active → 进入的过渡状态
v-enter-to → 进入的结束状态
v-leave → 离开的开始状态
v-leave-active → 离开的过渡状态
v-leave-to → 离开的结束状态
以进入过渡为例：
时间线：
├── 元素插入
├── 添加 v-enter
├── 添加 v-enter-active
├── 下一帧：移除 v-enter，添加 v-enter-to
├── 过渡完成
├── 移除 v-enter-active
└── 移除 v-enter-to
<div id="app">
<button @click="show = !show">切换</button>
<transition name="fade">
<p v-if="show" class="content">Hello Vue!</p>
</transition>
</div>
<style>
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 0.5s;
}
.fade-enter-to {
opacity: 1;
}
.fade-leave {
opacity: 1;
}
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-leave-to {
opacity: 0;
}
</style>
<script>
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
通常 v-enter 和 v-leave-to 是相同的状态，v-enter-to 和 v-leave 也是：
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
这样只需要写两段 CSS。
如果需要自定义类名（比如配合 Animate.css），可以这样：
<transition
enter-active-class="animated bounceIn"
leave-active-class="animated bounceOut"
>
<p v-if="show">Hello</p>
</transition>
可自定义的属性：
enter-classenter-active-classenter-to-classleave-classleave-active-classleave-to-class<style>
.slide-enter, .slide-leave-to {
transform: translateX(-100%);
opacity: 0;
}
.slide-enter-active, .slide-leave-active {
transition: all 0.3s ease;
}
.slide-enter-to, .slide-leave {
transform: translateX(0);
opacity: 1;
}
</style>
<style>
.scale-enter {
transform: scale(0);
opacity: 0;
}
.scale-enter-active {
transition: all 0.3s ease-out;
}
.scale-enter-to {
transform: scale(1);
opacity: 1;
}
.scale-leave {
transform: scale(1);
opacity: 1;
}
.scale-leave-active {
transition: all 0.3s ease-in;
}
.scale-leave-to {
transform: scale(0);
opacity: 0;
}
</style>
多个属性同时过渡：
.combo-enter, .combo-leave-to {
opacity: 0;
transform: translateY(20px) scale(0.9);
}
.combo-enter-active, .combo-leave-active {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
进入和离开可以使用不同的过渡时间：
.fade-enter-active {
transition: opacity 0.3s;
}
.fade-leave-active {
transition: opacity 1s;
}
离开时动画更慢，给用户更多时间看清内容。
使用不同的 timing function 创造不同效果：
.bounce-enter-active {
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.elastic-enter-active {
transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
常见问题：
类名前缀：<transition name="fade"> 对应 fade-enter，没有 name 时默认 v-enter
过渡不生效：确保设置了 transition 属性，并且开始和结束状态不同
display: none：过渡期间不要设置 display: none，会打断过渡
.delay-leave-active {
transition: all 0.5s 0.2s;
}
.stagger-enter-active {
transition: all 0.5s;
}
.stagger-enter:nth-child(1) { transition-delay: 0.1s; }
.stagger-enter:nth-child(2) { transition-delay: 0.2s; }
.stagger-enter:nth-child(3) { transition-delay: 0.3s; }
理解过渡类名后，你就可以创建各种过渡效果了。