Vue中的動畫需要配合css3來實現(xiàn)

1.單個元素動畫

在Vue中觸發(fā)一個元素的動畫效果，必須使用v-if或者v-show來切換

Vue單個元素動畫，只能包裹一個標(biāo)簽，使用transition標(biāo)簽，取一個name值

在style中設(shè)置動畫效果，transition中設(shè)置的name值為css3中的選擇器前綴

.fade-enter-active,.fade-leave-active {? ? //fade為transition中的name值

? ? ? ? transition: opacity 3s;? ? ? ? //動畫時間為3秒，執(zhí)行動畫為opacity透明度變化

? ???????opacity: 1;? ? ? ? ??

? ? }

.fade-enter,

? ? .fade-leave-to {

? ? ? ? opacity: 0;

? ? }

2.分組元素動畫

分組元素動畫的觸發(fā)時機是：動態(tài)的添加或者刪除一個元素

分組元素動畫使用標(biāo)簽 transition-group 包裹

? ? ? ? ? ? ? ? name 作為css3 class 的前綴

? ? ? ? ? ? ? ? 使用 tag 作為解析后主標(biāo)簽包裹，原主標(biāo)簽可以刪除，

? ? ? ? ? ? ? ? 原標(biāo)簽的CSS樣式可以添加在該標(biāo)簽中

二.生命周期鉤子函數(shù)

生命周期函數(shù)就一個自執(zhí)行的回調(diào)函數(shù)

created()? ? --????當(dāng)前 Vue 實例被 創(chuàng)建的時候觸發(fā)的鉤子函數(shù)

mounted()? ? --? ? Vue中的代碼完成了頁面的渲染，掛載到了頁面上

updated()? ? --????只要是 data 里面的數(shù)據(jù)發(fā)生了變化，同時更新了頁面，那么 這個 updated 就會被觸發(fā)

destroyed()? ? --????頁面關(guān)閉的時候進行觸發(fā)，一般情況下我們在這里清除計時器等可能造成內(nèi)存泄漏的變量

其他生命周期函數(shù)只會觸發(fā)一次，data里面的數(shù)據(jù)多次改變更新頁面，updated就會多次觸發(fā)，頻繁的觸發(fā)會有性能上的缺陷