各位靓仔靓女，早上好/下午好/晚上好（取决于你们看这篇东西的时间），我是你们的老朋友，今天咱们来聊聊 Vue 应用里那些让人眼前一亮的动画效果，以及如何用 Transition 和 TransitionGroup 这俩神器，再搭配上 CSS 动画或者 Web Animations API，把你的应用打造成丝般顺滑的动画大师。
开场白：动画，不仅仅是花里胡哨
咱们先别急着上手写代码，先扯两句淡。动画这东西，在 Web 应用里可不是单纯为了好看。好的动画能引导用户，让交互更自然，反馈更清晰，甚至能提升用户体验，让你的应用用起来更舒服。想象一下，一个元素突然蹦出来，和一个元素淡入淡出，给人的感觉完全不一样，对吧？
Vue 的 Transition 和 TransitionGroup 就是为了简化动画效果的实现而生的。它们帮你处理了动画的各个阶段，比如进入、离开、更新等等，让你只需要关注动画本身，而不用操心那些复杂的生命周期钩子。
第一章：Transition 组件：单元素动画的瑞士军刀
Transition 组件就像一把瑞士军刀，简单易用，功能强大。它主要用于包裹单个元素或组件，并根据元素的插入、更新或删除，自动应用 CSS 类名或调用 JavaScript 钩子函数，从而实现动画效果。
1.1 基本用法：CSS 动画的甜蜜伙伴
最常见的用法就是结合 CSS 动画。Transition 组件会根据不同的动画阶段，自动添加一些 CSS 类名，你可以利用这些类名来定义动画效果。
<template>
<div>
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">Hello, Animation!</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
<style>
/* 进入动画 */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
/* 进入动画开始状态 */
.fade-enter {
opacity: 0;
}
/* 离开动画结束状态 */
.fade-leave-to {
opacity: 0;
}
</style>在这个例子中，我们使用了 name="fade"，这意味着 Transition 组件会添加以下 CSS 类名：
| 类名 | 描述 |
|---|---|
fade-enter-from |
进入动画的起始状态。在元素插入 DOM 前添加，在元素插入 DOM 后立即删除。 |
fade-enter-active |
进入动画的激活状态。在元素插入 DOM 后添加，在 transition/animation 完成之后移除。这个类名可以用来定义 transition 的属性，duration 和 easing function。 |
fade-enter-to |
进入动画的结束状态。在元素插入 DOM 后，下一帧（next frame）添加 (与此同时 fade-enter-from 被移除)，在 transition/animation 完成之后移除。 |
fade-leave-from |
离开动画的起始状态。在离开过渡开始时添加，在下一帧移除。 |
fade-leave-active |
离开动画的激活状态。在离开过渡开始时添加，在 transition/animation 完成之后移除。这个类名可以用来定义 transition 的属性，duration 和 easing function。 |
fade-leave-to |
离开动画的结束状态。在离开过渡被触发后，下一帧添加 (与此同时 fade-leave-from 被移除)，在 transition/animation 完成之后移除。 |
敲黑板！重点来了！
enter-from和leave-to类名用于定义动画的起始和结束状态，enter-active和leave-active类名用于定义动画的过渡效果。name属性可以自定义类名的前缀，方便你在多个 Transition 组件中使用不同的动画效果。
1.2 使用 CSS Animation：更强大的动画控制
除了 CSS Transition，你也可以使用 CSS Animation。Transition 组件同样会添加相应的类名，让你控制动画的播放。
<template>
<div>
<button @click="show = !show">Toggle</button>
<transition name="bounce">
<p v-if="show">Hello, Animation!</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
<style>
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>1.3 JavaScript 钩子：更灵活的动画控制
如果你需要更精细的控制，可以使用 JavaScript 钩子函数。Transition 组件提供了 before-enter、enter、after-enter、enter-cancelled、before-leave、leave、after-leave、leave-cancelled 等钩子函数，让你在动画的不同阶段执行自定义的 JavaScript 代码。
<template>
<div>
<button @click="show = !show">Toggle</button>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave"
>
<p v-if="show">Hello, Animation!</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
// 使用 Web Animations API
el.animate(
[
{ opacity: 0, transform: 'translateY(-20px)' },
{ opacity: 1, transform: 'translateY(0)' }
],
{
duration: 500,
easing: 'ease-out'
}
).finished.then(() => {
done(); // 必须调用 done()，表示动画完成
});
},
afterEnter(el) {
el.style.opacity = 1;
},
leave(el, done) {
el.animate(
[
{ opacity: 1, transform: 'translateY(0)' },
{ opacity: 0, transform: 'translateY(-20px)' }
],
{
duration: 500,
easing: 'ease-in'
}
).finished.then(() => {
done(); // 必须调用 done()，表示动画完成
});
},
afterLeave(el) {
// el.style.display = 'none'; // 这一步 Vue 会自动做
}
}
}
</script>注意！注意！注意！
- 在
enter和leave钩子函数中，必须调用done()回调函数，告诉 Transition 组件动画已经完成。否则，动画会一直卡在那里。 - Web Animations API 提供了更强大的动画控制能力，可以精确控制动画的每个关键帧和过渡效果。
第二章：TransitionGroup 组件：列表动画的魔法师
TransitionGroup 组件用于包裹多个元素或组件，实现列表动画效果。它会为每个元素添加唯一的 data-index 属性，方便你控制每个元素的动画。
2.1 基本用法：列表的淡入淡出
<template>
<div>
<button @click="addItem">Add Item</button>
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
],
nextId: 3
}
},
methods: {
addItem() {
this.items.push({ id: this.nextId++, text: `Item ${this.nextId - 1}` });
}
}
}
</script>
<style>
.list-enter-active, .list-leave-active {
transition: all 0.5s;
}
.list-enter-from, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>2.2 tag 属性：自定义包裹元素
tag 属性用于指定 TransitionGroup 组件渲染成的 HTML 标签。默认情况下，TransitionGroup 组件会渲染成一个 <span> 标签。你可以根据需要修改 tag 属性，比如改成 <ul>、<ol> 或 <div>。
2.3 move-class 属性：列表排序动画
move-class 属性用于指定列表排序动画的 CSS 类名。当列表中的元素位置发生变化时，TransitionGroup 组件会自动添加该类名，你可以利用该类名来定义排序动画效果。
<template>
<div>
<button @click="shuffle">Shuffle</button>
<transition-group name="list" tag="ul" move-class="list-move">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
{ id: 4, text: 'Item 4' }
]
}
},
methods: {
shuffle() {
this.items.sort(() => Math.random() - 0.5);
}
}
}
</script>
<style>
.list-enter-active, .list-leave-active {
transition: all 0.5s;
}
.list-enter-from, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}
.list-move {
transition: transform 0.5s;
}
</style>2.4 JavaScript 钩子：列表动画的精细控制
TransitionGroup 组件也支持 JavaScript 钩子函数，用法和 Transition 组件类似。你可以使用钩子函数来控制每个元素的动画效果。
第三章：Web Animations API：动画的未来之星
Web Animations API (WAAPI) 是一种全新的 Web 动画标准，它提供了更强大的动画控制能力，可以精确控制动画的每个关键帧和过渡效果。与 CSS 动画相比，WAAPI 具有以下优点：
- 更灵活的控制： 可以动态修改动画的属性，暂停、恢复、倒放动画。
- 更高的性能： 浏览器可以更好地优化 WAAPI 动画，提高动画的流畅度。
- 更好的集成： 可以与 JavaScript 代码无缝集成，实现更复杂的动画效果。
3.1 基本用法：使用 WAAPI 实现淡入淡出
const element = document.querySelector('.element');
const animation = element.animate(
[
{ opacity: 0 },
{ opacity: 1 }
],
{
duration: 500,
easing: 'ease-in-out'
}
);
animation.onfinish = () => {
console.log('Animation finished!');
};3.2 与 Vue Transition 集成：打造流畅的动画体验
你可以将 WAAPI 与 Vue Transition 组件结合使用，实现更流畅的动画体验。
<template>
<div>
<button @click="show = !show">Toggle</button>
<transition
@enter="enter"
@leave="leave"
>
<p v-if="show" class="element">Hello, Animation!</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
enter(el, done) {
el.animate(
[
{ opacity: 0, transform: 'translateY(-20px)' },
{ opacity: 1, transform: 'translateY(0)' }
],
{
duration: 500,
easing: 'ease-out'
}
).finished.then(() => {
done();
});
},
leave(el, done) {
el.animate(
[
{ opacity: 1, transform: 'translateY(0)' },
{ opacity: 0, transform: 'translateY(-20px)' }
],
{
duration: 500,
easing: 'ease-in'
}
).finished.then(() => {
done();
});
}
}
}
</script>
<style>
.element {
/* 这里可以定义一些初始样式，比如 position: absolute; */
}
</style>第四章：优化动画性能：让你的应用飞起来
动画性能是影响用户体验的关键因素。如果动画卡顿，用户体验会大打折扣。以下是一些优化动画性能的技巧：
- 使用
transform和opacity： 这两个属性是浏览器优化的重点，修改它们通常比修改其他属性更高效。 - 避免频繁触发
layout： 修改元素的尺寸、位置等属性会导致浏览器重新计算布局，这会消耗大量的性能。 - 使用
will-change：will-change属性可以提前告诉浏览器哪些属性将会发生变化，让浏览器提前进行优化。 - 硬件加速： 确保你的动画使用了硬件加速。
- 使用 Web Animations API： WAAPI 提供了更强大的动画控制能力，可以更好地利用浏览器的优化机制。
- 避免在
scroll事件中执行复杂的动画：scroll事件触发频率很高，如果在scroll事件中执行复杂的动画，会导致动画卡顿。可以使用requestAnimationFrame来优化scroll事件中的动画。
第五章：案例分析：一个简单的动画组件库
咱们来做一个简单的动画组件库，封装一些常用的动画效果，方便在项目中复用。
// Fade.vue
<template>
<transition name="fade">
<slot></slot>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>// Slide.vue
<template>
<transition name="slide">
<slot></slot>
</transition>
</template>
<style>
.slide-enter-active, .slide-leave-active {
transition: transform 0.5s;
}
.slide-enter-from {
transform: translateX(-100%);
}
.slide-leave-to {
transform: translateX(100%);
}
</style>然后在你的应用中使用这些组件：
<template>
<div>
<button @click="show = !show">Toggle</button>
<Fade>
<p v-if="show">Hello, Fade!</p>
</Fade>
<Slide>
<p v-if="show">Hello, Slide!</p>
</Slide>
</div>
</template>
<script>
import Fade from './components/Fade.vue';
import Slide from './components/Slide.vue';
export default {
components: {
Fade,
Slide
},
data() {
return {
show: false
}
}
}
</script>总结：动画，让你的应用更上一层楼
今天咱们聊了 Vue 的 Transition 和 TransitionGroup 组件，以及如何结合 CSS 动画和 Web Animations API 来实现各种动画效果。动画不仅仅是花里胡哨，它可以提升用户体验，让你的应用更上一层楼。记住，好的动画应该自然流畅，引导用户，而不是让用户感到困惑。
希望今天的分享对你有所帮助，下次再见！