簡單動畫
將要實現(xiàn)動畫效果的 DOM 節(jié)點用 transition 標簽包裹起來润绎，可添加 name 屬性；
若沒有 name 屬性撵摆，則默認的 class 前綴為 v
<style>
.fa-enter,.fa-leave-to{
opacity: 0;
}
.fa-enter-active,.fa-leave-active{
transition: opacity 3s;
}
</style>
<div id="root">
<transition name="fa">
<div v-if="show">hello world </div>
</transition>
<button @click="handleClick">{{change}}</button>
</div>
transition動畫過渡原理
transition動畫過度原理
v-enter{ opacity： 0} v-enter-active{transition:opacity 3s}
動畫執(zhí)行之前vue會在被<transition>包裹的組件上添加兩個類
<div class="v-enter v-enter-active"></div>
顯示：開始：v-enter v-enter-active（o=0）
→第二幀 v-enter-to v-enter-active(o=1)
→兩個類消失
v-enter-active存在于整個動畫執(zhí)行的過程中
v-enter在動畫開始時存在底靠，動畫執(zhí)行到第二幀v-enter類被移除
v-enter-to出現(xiàn)，opacity變成1, v-enter-active監(jiān)聽到這個變化特铝，并用三秒完成
隱藏：開始：v-leave v-leave-active（o=1）
→第二幀 v-leave-to v-leave-active(o=0)
→兩個類消失
v-leave-active存在于整個動畫執(zhí)行的過程中
v-leave在動畫開始時存在暑中，動畫執(zhí)行到第二幀v-leave類被移除
v-leave-to出現(xiàn)，opacity變成0, v-enter-active監(jiān)聽到這個變化鲫剿，并用三秒完成
-->
引用animate.css 庫
使用自定義的 類名鳄逾，將 transition 標簽中，添加灵莲，enter-active-class 屬性雕凹，
值為自定義的名字，
使用 animation庫 填寫 ‘a(chǎn)nimated xxx’
進入時設(shè) enter-active-class = ''
離開時設(shè) leave-active-class = ''
刷新頁面時有入場效果需要加入appear 屬性和
自定義class：appear-active-class="自定義類名"
使用 :duration="{ enter: 200, leave: 400 }" 來分別設(shè)置 入場的時長 和 離場的時長
:duration="1000"統(tǒng)一設(shè)置
使用鉤子函數(shù)和列表動畫
鉤子函數(shù)
Vue 把一個完整的動畫，使用鉤子函數(shù)请琳，拆分為了兩部分：
我們使用 flag 標識符，來表示動畫的切換赠幕；
剛以開始俄精，flag = false -> true -> false
vue動畫.png
