Vue 的 Transition 组件详解

Vue 提供了强大的 Transition 组件来处理元素或组件的进入和离开过渡效果。该组件通过一系列预定义的类名来控制动画，使得开发者可以轻松地结合 CSS 或 Javascript 实现各种动画。

在 xxx-enter-active 和 xxx-leave-active 类中，可以通过添加 CSS 过渡属性来定义动画行为。

.slide-leave-from { width: 200px; height: 200px; } .slide-leave-active { transition: all 1s; animation: bounce-in 0.5s reverse; } .slide-leave-to { width: 0; height: 0; }

使用自定义类名后：

.from { width: 0; height: 0; } .slide-enter-active { transition: all 1s; animation: bounce-in 0.5s; } .to { width: 200px; height: 200px; }

代码示例:

使用 animate.css 动画库

animate.css 是一个流行的 CSS 动画库，提供了丰富的预设动画效果。安装和引入 animate.css 非常简单：

npm install animate.css --save

import "animate.css";

使用时只需为元素添加 animate__animated 类和具体的动画类名即可：

动画元素

效果展示：

学习 GSAP 动画库

GSAP (GreenSock Animation Platform) 是一个功能强大的 Javascript 动画库，支持创建复杂且高性能的动画效果。它不仅适用于 Vue 过渡，还广泛应用于 Three.js 等图形库中。

官网：GreenSock 官网

结合 Transition 生命周期和 GSAP:

let beforeEnter = (el) => { gsap.set(el, { background: '#ccc' }); }; let enter = (el, done) => { gsap.to(el, { backgroundColor: 'pink', duration: 1, onComplete: done }); }; let afterEnter = () => { console.log('动画完成'); }; let leave = (el, done) => { gsap.to(el, { backgroundColor: '#ccc', duration: 1, onComplete: done }); };