VueJS - 轉場與動畫

引言

你好啊，未來的Vue.js大師！? 我很高興能成為你進入Vue.js轉場和動畫魔法世界的引路人。作為一個教了多年計算機科學的人，我可以告訴你，為你的網頁應用程序添加平滑的轉場和吸引人的動畫，就像在杯子蛋糕上加 sprinkles 一樣——它讓一切變得更加美味！

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 類來進行轉場的靈活性。這在你想使用第三方 CSS 動畫庫（如 Animate.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