Vue 2.0學習筆記：Vue的animation
上一節我們學習了Vue 2.0中的 <transition> 實現元素從狀態 A 到狀態 B 的過渡效果。對於元素過渡的效果是通過CSS的 transition 來完成，具體什麼時候執行是由Vue來控制的。而 transition 的效果畢竟有所限制，對於一些複雜的動效，還是需要通過別的方式來完成。在Vue中除了 transition 之外還可以完成 animation 的效果。也就是可以將CSS的 animation 運用到Vue中來，實現一些動畫效果。今天這篇文章我們就來學習如何在Vue運用CSS的 animation 。
回憶一下CSS中的animation
CSS的 animation 已經不是什麼新技術了，在Web上隨處都有可能看到CSS的 animation 實現的動效。而且社群中有關於使用 animation 實現動畫的庫也非常的多，比如@Daniel Eden的 ofollow,noindex" target="_blank">Animate.CSS ：
在CSS中 animation 的原理非常的簡單，首先要通過 @keyframes 宣告一個動畫，然後通過 animation-name 來呼叫宣告好的動畫名。當然 animation 還提供了其他的屬性來幫助我們更好的控制CSS動畫。有關於CSS的動畫相關的介紹，這裡不做過多的闡述，如果你感興趣的話可以點選這裡 或這裡進行了解。
在這裡我們來看一個簡單的動畫案例：
有關於CSS 動畫相關的程式碼就不貼出來了，感興趣的話可以直接檢視上面的Demo。那麼我們接下來看看在Vue中怎麼運用CSS的 animation 來實現動效。
Vue中的 animation
在Vue中實現 animation 效果的用法和 transition 類似，同樣是把需要設有動效的元素放置在 <transition> 中。 animation 和 transition 不同的是在 animation 中 v-enter 類名在節點插入DOM後不會立即刪除，而是在 animationEnd 事件觸發時刪除。比如下面這個示例：
<!-- Bounce.vue -->
<template>
<div class="animation">
<button @click="isToggle" :class="isShow ? 'is-show' : 'is-hidden'">
{{ isShow ? "隱藏" : "顯示" }}
</button>
<transition name="bounce">
<div class="animation-el" v-if="isShow"></div>
</transition>
</div>
</template>
<script>
export default {
name: "Bounce",
data() {
return {
isShow: false
};
},
methods: {
isToggle() {
this.isShow = !this.isShow;
}
}
};
</script>
<style scoped>
.bounce-enter-active {
animation: bounce 1s;
}
.bounce-leave-active {
animation: bounce 1s reverse;
}
@keyframes bounce {
0% {
background-position: 50% calc(50% - 4em), 50% calc(50% + 0.4em);
background-size: 2em 2em, 1em 1em;
}
40% {
background-position: 50% 50%, 50% calc(50% + 0.3em);
background-size: 2em 2em, 3em 1em;
}
45% {
background-position: 50% 50%, 50% calc(50% + 0.3em);
background-size: 2em 1.5em, 3em 1em;
}
50% {
background-position: 50% 50%, 50% calc(50% + 0.3em);
background-size: 2em 1em, 3em 1em;
}
100% {
background-position: 50% calc(50% - 4em), 50% calc(50% + 0.3em);
background-size: 2em 2em, 1em 1em;
}
}
</style>
效果如下：
自定義過渡的類名
上面的示例中再次告訴我們，CSS動畫可以像過渡一樣在Vue中使用。前面也提到了，@Daniel Eden的 Animate.CSS 是一個非常優秀的CSS動畫庫。既然他這麼優秀，因此在Vue中我們可以很容易地將其應用到相應的應用中。如果你需要把Animate.CSS運用到Vue中，你可以使用 npm 或CDN來新增 animate.css 到Vue應用程式中。
npm i animate.css --save
然後在 main.js 中引入 animate.css ：
import "animate.css"
如果通過CDN的話，可以 index.html 中通過 <link> 引入 animate.css 在CDN的地址，比如：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
animate.css 為我們提供了CSS類，讓我們可以方便地向元素新增動畫。但是我們如何在Vue中將這些類應用到對應的元素中呢？通過上一切的學習，我們瞭解到，可以通過 enter-class 、 enter-active-class 、 leave-class 和 leave-active-class 作為輸入，幫助我們將動畫類附加到對應的元素上。在Vue中，我們把這些類名稱為自定義過渡類名：
enter-class enter-active-class enter-to-class leave-class leave-active-class leave-to-class
這幾個類名在Vue中被稱為 自定義過渡類名 ，他們的優先順序高於普通的類名。特別是在引入像 animate.css 這樣的第三方CSS動畫庫十分地有用。比如下面這個示例：
<!-- Bounce.vue -->
<template>
<div class="toogle-alert">
<button @click="isToggle" :class="isShow ? 'is-show' : 'is-hidden'">
{{ isShow ? "隱藏" : "顯示" }}
</button>
<transition
mode="out-in"
appear
enter-active-class="animated bounceIn"
leave-active-class="animated bounceOut"
>
<div class="alert alert-info" v-if="isShow" key="info">
{{ alertInfoMsg }}
</div>
<div class="alert alert-error" v-else key="error">
{{ alertErrorMsg }}
</div>
</transition>
</div>
</template>
<script>
export default {
name: "Bounce",
data() {
return {
isShow: true,
alertInfoMsg: "Hello! W3cplus.com!",
alertErrorMsg: "Goodbye! W3cplus.com!"
};
},
methods: {
isToggle() {
this.isShow = !this.isShow;
}
}
};
</script>
效果如下：
正如上例，在大多數情況下， enter-active-class 和 leave-active-class 足以滿足所需的動畫。
顯式地過渡持續時間
在CSS的 animation 中，我們有 animation-duration 和 animation-delay 可以用來控制動畫播放時間。而在Vue中，很多情況之下，可以自動得出過渡效果完成時間。預設情況下，Vue會等待其在過渡效果的根元素的第一個 transitionend 或 animationend 事件。然而也可以不這樣設定，比如，我們可以擁有一個精心編排的一系列過渡效果，其中一些巢狀的內部元素相比於過渡效果的根元素有延遲的或更長的過渡效果。
在這種情況下，可以在 <transition> 上新增 duration 屬性定製一個顯式地過渡持續時間（以 ms 為單位），比如上面的示例，我們可以像下面這樣新增 duration 屬性值：
<transition mode="out-in" appear enter-active-class="animated zoomIn" leave-active-class="animated hinge" :duration="1000" > ... </transition>
得到的效果如下：
你也可以定製進入和移出的持續時間：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
效果如下：
案例： 列表滾動
接下來看看怎麼使用Vue中的 <transition> 和CSS動畫來實現下圖這樣的效果：
在沒有使用 <transition> 的情況下，實現上圖的效果，我們可能會考慮下面這個示例這樣的方式來實現：
接下來我們來看看怎麼使用 animate.css 配合 <transition> 實現類似上例的效果：
詳細程式碼不介紹。
<transition
appear
enter-active-class="animated slideInUp"
leave-active-class="animated slideOutUp"
mod="out-in"
:duration="{ enter: 500, leave: 800 }"
>
<div :key="content.id" class="slider">
<div class="avatar">
<img :src="content.avatar" :alt="content.nick" />
</div>
<div class="msg">{{ content.nick }} ! {{ content.msg }}</div>
</div>
</transition>
在這裡我們引用了 slideInUp 和 slideOutUp 兩個動畫效果，分別在 enter-active 和 leave-active 兩個狀態呼叫。
在這個示例中，我們的內容不是通過 v-if 或 v-show 來插入和刪除的，而以通過在 computed 中的 content() 方法配合一個 SliderAnimation() 函式來實現的。 SliderAnimation() 是一個定時器，在定時器中不斷改變 computed 對應的值：
computed: {
content() {
return {
id: this.num,
avatar: this.lists[this.num].avatar,
nick: this.lists[this.num].nick,
msg: this.lists[this.num].msg
};
}
},
mounted() {
this.SliderAnimation();
},
methods: {
SliderAnimation() {
this.lists.push(this.lists[0]);
const max = this.lists.length;
let timer = setTimeout(() => {
this.num++;
if (this.num >= max) {
this.num = 0;
}
this.SliderAnimation();
}, this.totalDuration);
}
}
總結
這篇文章主要介紹了在Vue中的 <transition> 是如何結合CSS的 animation 動畫庫（ animate.css ）實現動畫效果。通過這篇文章的學習，我們已經瞭解了在Vue中 <transition> 是怎麼實現 transition 和 animation 效果。其實在Vue中，有關於動畫的內容不僅僅是這些，還有更多有意思的東西。我們將在後續的內容還會持續更新和關注這一領域的內容。感興趣的同學歡迎關注後續的更新。如果您有更多的經驗歡迎在下面的評論中與我們分享，如果文章中有不對之處，還請多多指正。