【Vue2 ✨】Vue2 入门之旅（八）：过渡与动画

前几篇我们学习了事件处理。本篇将介绍 过渡与动画，让 Vue 页面更加生动。

---

目录

1. transition 组件
2. 进入与离开过渡
3. 过渡类名
4. 结合 CSS 动画
5. JavaScript 钩子
6. 小结

---

transition 组件

Vue 提供了内置组件 <transition>，可以为元素或组件的进入和离开添加动画效果。

<div id="app"><button @click="show = !show">切换</button><transition name="fade"><p v-if="show">Hello Vue!</p></transition>
</div><script>
new Vue({el: '#app',data: {show: true}
})
</script><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

点击按钮时，文字淡入淡出。

---

进入与离开过渡

当元素插入或移除时，Vue 会自动应用 过渡类名：

• .v-enter：进入开始状态
• .v-enter-active：进入过渡状态
• .v-enter-to：进入结束状态
• .v-leave：离开开始状态
• .v-leave-active：离开过渡状态
• .v-leave-to：离开结束状态

通过这些类名，我们可以自由定义动画效果。

---

过渡类名

使用 <transition name="fade"> 时，Vue 会自动拼接类名：

fade-enter
fade-enter-active
fade-enter-to
fade-leave
fade-leave-active
fade-leave-to

这样可以为不同过渡定义不同样式。

---

结合 CSS 动画

过渡不仅可以用 transition，也可以用 @keyframes 动画。

<transition name="bounce"><p v-if="show">跳动的文字</p>
</transition><style>
.bounce-enter-active {animation: bounce-in 0.8s;
}
.bounce-leave-active {animation: bounce-in 0.8s reverse;
}
@keyframes bounce-in {0% { transform: scale(0.5); }50% { transform: scale(1.2); }100% { transform: scale(1); }
}
</style>

效果：文字从小放大，带有弹跳感。

---

JavaScript 钩子

除了 CSS，还可以用 JavaScript 控制过渡。

<div id="app"><button @click="show = !show">切换显示/隐藏</button><transition @before-enter="beforeEnter" @enter="enter" @leave="leave"><p v-if="show">JS 控制动画</p></transition>
</div><script>new Vue({el: '#app',data: { show: true },methods: {beforeEnter(el) {// 动画开始前el.style.opacity = 0;},enter(el, done) {// 进入动画setTimeout(() => {el.style.transition = "opacity 1s";el.style.opacity = 1;done(); // 通知 Vue 动画结束}, 0);},leave(el, done) {// 离开动画el.style.transition = "opacity 1s";el.style.opacity = 0;setTimeout(done, 1000);}}})</script>

这里用 JS 精准控制了进入和离开的动画。

---

小结

1. 使用 <transition> 可以为元素添加过渡动画。
2. Vue 自动应用过渡类名，如 .fade-enter、.fade-leave-to。
3. 过渡既可以用 CSS transition / animation，也可以用 JavaScript 钩子。

---

📚 下一篇文章，我们将学习 Vue Router 入门，掌握路由配置和页面切换。