VueJS - 过渡和动画

引言

你好啊，未来的 Vue.js 巫师们！? 我很兴奋能成为你们在这段激动人心的旅程中的向导，一起探索 Vue.js 中的过渡和动画魔法世界。作为一名教授计算机科学多年的老师，我可以告诉你，为你的网页应用添加平滑的过渡和吸引眼球的动画，就像在杯cake 上撒糖霜——它让一切变得更加愉快！

VueJS - Transition & Animation

现在，如果你是编程新手，不用担心。我们将从最基础的内容开始，逐步学习。在本教程结束时，你将能创建出让你的朋友们惊叹的动画，他们会说：“哇，你怎么做到的？” 所以，让我们开始吧！

过渡

过渡是什么？

在网页开发的世界里，过渡就像是状态之间的平滑变化。想象一下一个灯光开关，它不是突然打开或关闭，而是逐渐变亮或变暗。这就是过渡的本质！

基本过渡示例

让我们从一个简单的例子开始。我们将创建一个按钮，当点击时，会以平滑的淡入淡出效果显示或隐藏一条消息。

<template>
<div>
<button @click="show = !show">切换</button>
<transition name="fade">
<p v-if="show">你好，我是一个过渡的消息！</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, .fade-leave-to {
opacity: 0;
}
</style>

让我们分解一下：

我们有一个按钮，点击时会切换 show 变量。
<transition> 组件包裹着我们的消息，name 属性设置为 "fade"。
段落上的 v-if 指令根据 show 变量显示或隐藏它。
在 <style> 部分，我们定义了过渡类：

.fade-enter-active 和 .fade-leave-active 设置过渡持续时间为 0.5 秒。
.fade-enter 和 .fade-leave-to 设置初始和最终透明度为 0（不可见）。

当你点击按钮时，消息将平滑地淡入和淡出。这难道不酷吗？

动画

过渡和动画的区别是什么？

虽然过渡非常适合简单的状态变化，但动画允许更复杂的多步骤效果。如果过渡就像平滑地调暗灯光，那么动画就像带有多种颜色和图案的光影秀！

基本动画示例

让我们创建一个弹跳球动画：

<template>
<div>
<button @click="show = !show">弹跳！</button>
<transition name="bounce">
<p v-if="show">?</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.25);
}
100% {
transform: scale(1);
}
}
</style>

在这个例子中：

我们使用了和之前相同的按钮切换机制。
<transition> 组件现在有 "bounce" 这个名字。
在 <style> 部分，我们定义了：

.bounce-enter-active 应用 bounce-in 动画。
.bounce-leave-active 应用相同的动画，但反向播放。
@keyframes 规则定义了我们的 bounce-in 动画，包含三个步骤。

当你点击按钮时，球将以弹跳效果出现，并以反向弹跳消失。有趣吧？

自定义过渡类

Vue.js 给我们提供了使用自定义 CSS 类来定义过渡的灵活性。当你想使用像 Animate.css 这样的第三方 CSS 动画库时，这非常有用。

下面是如何使用自定义类的示例：

<template>
<div>
<button @click="show = !show">动画！</button>
<transition
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
>
<p v-if="show">? 到达无限和远方！</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
/* 假设我们已经在这里导入了 Animate.css */
</style>

在这个例子中，我们直接在 <transition> 组件中使用了 Animate.css 类。enter-active-class 和 leave-active-class 属性允许我们为进入和离开动画指定自定义类。

显式过渡持续时间

有时，你可能想明确设置过渡或动画的持续时间。Vue.js 允许你使用 :duration 属性来做到这一点：

<template>
<div>
<button @click="show = !show">慢动作</button>
<transition :duration="1000">
<p v-if="show">我正在慢动作移动...</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.v-enter-active, .v-leave-active {
transition: all 1s;
}
.v-enter, .v-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>

在这里，我们将持续时间设置为 1000 毫秒（1 秒）以应用于进入和离开过渡。你也可以为进入和离开设置不同的持续时间：

<transition :duration="{ enter: 500, leave: 800 }">
<!-- ... -->
</transition>

JavaScript 钩子

为了对过渡有更多的控制，Vue.js 提供了 JavaScript 钩子。这些就像是在过渡过程中特定时刻运行代码的小助手。

这里是一个例子：

<template>
<div>
<button @click="show = !show">动画</button>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<p v-if="show">? 我由 JavaScript 控制！</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
},
methods: {
beforeEnter(el) {
console.log('进入之前');
},
enter(el, done) {
console.log('进入');
done();
},
afterEnter(el) {
console.log('进入之后');
},
enterCancelled(el) {
console.log('进入取消');
},
beforeLeave(el) {
console.log('离开之前');
},
leave(el, done) {
console.log('离开');
done();
},
afterLeave(el) {
console.log('离开之后');
},
leaveCancelled(el) {
console.log('离开取消');
}
}
}
</script>

这些钩子让你可以精确控制过渡过程。你可以用它们来触发其他动画、更新数据或在过渡的特定时刻执行任何其他操作。

初始渲染的过渡

默认情况下，Vue.js 中的过渡只在元素插入到 DOM 中或从 DOM 中移除时发生。但如果你想要在初始渲染时就有过渡效果呢？Vue.js 用 appear 属性为你提供了这个功能：

<template>
<div>
<transition appear>
<p>? 我以过渡效果出现！</p>
</transition>
</div>
</template>

<style>
.v-enter-active {
transition: all .3s ease;
}
.v-enter {
opacity: 0;
transform: translateY(-20px);
}
</style>

使用 appear 属性，元素在组件首次渲染时将会有过渡效果。

组件动画

最后但同样重要的是，我们来谈谈组件的动画。好消息是，我们可以将我们讨论过的所有过渡特性应用到你的自定义组件上！

<template>
<div>
<button @click="toggleComponent">切换组件</button>
<transition name="fade" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentComponent: 'ComponentA'
}
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
}
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

在这个例子中，我们在两个组件之间切换，并使用淡入淡出过渡。mode="out-in" 属性确保旧组件在过渡出之前，新组件已经开始过渡入。

结论

哇，我们涵盖了很多内容！从基本的过渡到复杂的动画，自定义类到 JavaScript 钩子，甚至是组件动画。记住，掌握这些概念的关键是实践。所以，继续实验这些例子，混合搭配不同的技术，最重要的是，享受乐趣！

动画和过渡能够真正地带给你的 Vue.js 应用程序生机。它们不仅仅是看起来漂亮（尽管这绝对是一个加分项！）——它们还可以通过提供视觉反馈和引导用户使用你的应用程序来改善用户体验。

继续探索，继续创造，不久之后，你将成为开发团队中的动画大师。祝未来的 Vue.js 大师们编程愉快！?✨

方法	描述
`transition`	包裹一个元素或组件以应用进入/离开过渡
`animation`	定义一个可重用的动画，可以应用于元素
`enter-active-class`	为进入过渡指定一个自定义 CSS 类
`leave-active-class`	为离开过渡指定一个自定义 CSS 类
`:duration`	设置过渡的持续时间
`@before-enter`	在进入过渡开始之前调用的 JavaScript 钩子
`@enter`	在进入过渡开始时调用的 JavaScript 钩子
`@after-enter`	在进入过渡完成后调用的 JavaScript 钩子
`@enter-cancelled`	在进入过渡被取消时调用的 JavaScript 钩子
`@before-leave`	在离开过渡开始之前调用的 JavaScript 钩子
`@leave`	在离开过渡开始时调用的 JavaScript 钩子
`@after-leave`	在离开过渡完成后调用的 JavaScript 钩子
`@leave-cancelled`	在离开过渡被取消时调用的 JavaScript 钩子
`appear`	在元素初始渲染时应用过渡
`mode`	指定离开/进入过渡的时机

Credits: Image by storyset