本內(nèi)容為系列內(nèi)容碉克，全部?jī)?nèi)容請(qǐng)看我的vue教程分類
過去都是jquery來做動(dòng)畫比較多吧巢块，這一節(jié)就是介紹一下vue的過渡和動(dòng)畫庐氮，這需要你具備實(shí)現(xiàn)css的基本過渡和動(dòng)畫的能力
vue也可以借助第三方庫(kù)實(shí)現(xiàn)比較復(fù)雜的動(dòng)畫谒获，本次只是介紹常用的簡(jiǎn)單效果众弓，更深的在下次的進(jìn)階課程中
vue的過渡效果
這里要先介紹它的原理，也就是不同的階段給這個(gè)節(jié)點(diǎn)綁定上不同的class乓序，來看一個(gè)動(dòng)圖
大家可以發(fā)現(xiàn)在切換顯示與隱藏的過程中寺酪，這個(gè)節(jié)點(diǎn)的class出現(xiàn)了變化
這里來一個(gè)官方的圖
這里可能大家看不懂哈坎背，我們來一個(gè)實(shí)例，實(shí)例化vue寄雀，并添加一個(gè) isShow來控制顯示與隱藏
<script>
let vm = new Vue({
el: '#app',
data() {
return {
isShow: true,
}
},
})
</script>
然后在頁(yè)面中定義這個(gè)按鈕并綁定一個(gè)點(diǎn)擊事件用來切換得滤，transition標(biāo)簽就是vue用來包裹需要執(zhí)行過渡的節(jié)點(diǎn)
<body>
<div id="app">
<button v-on:click="isShow = !isShow">
Toggle
</button>
<transition>
<p v-if="isShow">我變化了</p>
</transition>
</div>
</body>
那么這個(gè)p標(biāo)簽節(jié)點(diǎn)，在切換顯示的過程中就會(huì)添加上上圖的幾個(gè) class 我們來寫一下盒犹，那么不管是顯示還是隱藏懂更，我都是改變字體的大小和透明度，方便展示
<style>
/* 出現(xiàn)時(shí)候的過渡效果 */
/* 最開始的轉(zhuǎn)態(tài) */
.v-enter {
opacity: 0;
}
/* 整個(gè)執(zhí)行過程 */
.v-enter-active {
transition: all 1s ease;
}
/* 最后的樣子 */
.v-enter-to {
font-size: 64px;
}
/* 消失的時(shí)候的過渡效果 */
.v-leave {}
/* 整個(gè)過程中 */
.v-leave-active {
transition: all 1s ease;
}
/* 最后的樣子 */
.v-leave-to {
opacity: 0;
font-size: 64px;
}
</style>
好的看下效果急膀，是可以的
那么這些 class的名字是怎么來的呢沮协？這里的名字都是vue設(shè)定好的，當(dāng)然我們?nèi)绻薷囊彩强梢缘淖可谙旅娴膭?dòng)畫中會(huì)講到
vue動(dòng)畫
還是使用上面的點(diǎn)擊切換和隱藏慷暂，我們?cè)陧?yè)面中新增一個(gè)節(jié)點(diǎn)，給它用 transition包裹并且 name屬性的值為big晨雳，這就是給這效果起了名字了行瑞，上面提到過 class 的自定義名字就要這樣使用
<transition name="big">
<p v-if="isShow">我變化了</p>
</transition>
然后我們定義css,注意看上面是 v-... 這里就變成 big...了 這就是自定義名字的方法，如果你不給這個(gè) transition設(shè)置name餐禁，默認(rèn)就是 v-,那么都是transition血久，vue怎么區(qū)別是過渡還是動(dòng)畫的呢？這就是你css怎么寫坠宴，它會(huì)自動(dòng)識(shí)別
.big-enter-active {
animation: ani1 1s ease;
}
.big-leave-active {
animation: ani1 1s ease;
}
@keyframes ani1 {
0% {
font-size: 24px;
}
50% {
font-size: 80px;
}
100% {
font-size: 24px;
}
}
看看效果洋魂，是ok的
通過指定類名來實(shí)現(xiàn)使用第三方的動(dòng)畫庫(kù)
上面雖然使用 name來實(shí)現(xiàn)了自定義類名绷旗，但是如果我們使用第三方的動(dòng)畫庫(kù)喜鼓，這個(gè)自定義只修改了前綴，肯定是不能滿足需求的那么怎么做呢 這里以 animate.css為例
首先引入css文件
<link rel="stylesheet" type="text/css">
還是使用上面的切換衔肢，但是直接在 transition標(biāo)簽中指定不同周期使用的class類名
<transition name="xxx"
enter-active-class="animated bounceInUp"
leave-active-class="animated bounceInDown">
<p v-if="isShow">我變化了</p>
</transition>
看看效果是可以的
這種使用第三方庫(kù)的方式是不是就非常方便了啊
使用JavaScript鉤子函數(shù)
如果要實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫庄岖，或者咋動(dòng)畫執(zhí)行完成后觸發(fā)一些事件，就需要用到JavaScript鉤子函數(shù)
仍然使用上面的切換角骤，定義一個(gè)新的標(biāo)簽隅忿，然后在 transition 上直接給不同的周期綁定不同的事件，然后這個(gè)綁定一個(gè) css為false邦尊，為了避免這個(gè) transition使用上面我們定義的css動(dòng)畫效果
<transition :css="false"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div v-if="isShow">我變化了</div>
</transition>
然后我們寫一下這幾個(gè)方法背桐，記住enter和 leave中要使用 done才會(huì)去執(zhí)行 afterEnter、 afterLeave
methods: {
// 鉤子動(dòng)畫
beforeEnter(el) {
el.style.opacity = 0.5
},
enter(el, done) {
el.offsetWidth
el.style.fontSize = "48px"
el.style.transition = "all 1s ease"
// 回調(diào) 用于執(zhí)行afterEnter
done()
},
afterEnter(el){
el.style.opacity = 1
},
},
看看效果蝉揍，是可以的
vue列表過渡
通過 v-for渲染出來的數(shù)據(jù)的過渡效果是有點(diǎn)不一樣的链峭，我們來實(shí)踐一下吧
首先定義一個(gè)list
list: [1, 2, 3, 4]
然后我們渲染這個(gè)數(shù)據(jù)，并綁定一個(gè)點(diǎn)擊事件 刪除數(shù)據(jù)
<div v-for="i in list" @click="del(i)" :key="i">{{i}}</div>
寫一下這個(gè)刪除方法
del(i) {
this.list = this.list.filter((item) => {
return item != i;
})
},
這個(gè)時(shí)候又沾，我們用transition-group來包裹這個(gè)循環(huán),并且指定一個(gè)離開時(shí)候的class弊仪，這是我們上面引入的第三方動(dòng)畫庫(kù)類名
<transition-group leave-active-class="animated bounceInDown" >
<div v-for="i in list" @click="del(i)" :key="i">{{i}}</div>
</transition-group>
看看效果吧熙卡！可以的
那么更為復(fù)雜有趣的動(dòng)畫效果，我會(huì)在進(jìn)階課程里面講到
