1. Vue中的CSS transition過渡
當我們插入一個元素的時候，vue會在過渡的第0幀給<transition name="fade">標上"fade-enter","fade-enter-active"兩個類名, 在過渡的第一幀刪除"fade-enter"扮宠，添加上"fade-enter-to", 在整個過渡動畫結束之后西乖，刪除"fade-enter-to"和"fade-enter-active"類名。我們可以認為"fade-enter"和"fade-enter-to"是<transition>包裹的元素的兩個狀態(tài)坛增，當我們在"fade-enter-active"中加入CSS transition rule, 就可以在整個過渡動畫過程中檢測到狀態(tài)的變化获雕，其實兩個狀態(tài)的切換往往就在第0幀和第1幀，檢測到這一狀態(tài)變化之后收捣，css transition就會開始届案。
enter.png
刪除一個元素的時候流程也是相似的：
leave.png
細節(jié)：
<transition :duration='5000'>
<div>hello</div>
</transition>
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: all 1s ease;
}
</style>
- 我們可以顯式定義過渡動畫的持續(xù)時間。上述代碼中罢艾，盡管
transition:opacity的過渡動畫在1s后就完成了楣颠，但是v-enter-to,v-enter-active兩個類名會保持到5s結束。 - 因為transition其實是兩個狀態(tài)的切換咐蚯，在實際情況中童漩，
.v-enter,.v-leave-to表示的其實是一個狀態(tài)，因此往往采用相同的CSS rules春锋。
2. Vue中的CSS animation動畫
我們都知道CSS3中的animation不像transition需要狀態(tài)改變來觸發(fā)矫膨，因此我們可以直接在.v-enter-active,.v-leave-active中應用animation。我們可以自己通過keyframes自己創(chuàng)建動畫，也可以引用外部的CSS動畫庫豆拨，比如說animated.css直奋，里面是很多已經寫好的keyframes動畫。
3. 同時結合transition和animation的一個栗子
<style>
.slide-enter,.slide-leave-to{
opacity: 0;
}
.slide-enter-active{
transition: all 1s;
}
.slide-leave-active{
transition: all 1s;
}
</style>
<div id="root">
<button @click="show=!show">toggle</button>
<transition
:duration="5000"
name="slide"
appear
enter-active-class="animated slideInUp slide-enter-active"
leave-active-class="animated slideOutDown slide-leave-active"
appear-active-class="animated slideInUp slide-enter-active">
<div v-show="show">Hello</div>
</transition>
</div>
<script>
const app=new Vue({
el:"#root",
data:{
show:true,
}
});
</script>
