1铛只、transition過渡
Vue在插入墩弯、更新或者移除DOM時(shí)咒彤，提供了多種不同的方式的應(yīng)用過渡效果
1.1、單個(gè)元素的過渡
通過添加一些CSS動(dòng)畫或者直接使用animate.css動(dòng)畫庫(kù)即可
1.2厌蔽、多個(gè)元素的過渡
多個(gè)元素的過渡切換存在兩種情況發(fā)生，一種是這些元素是不同的摔癣，不同的組件或是不同的標(biāo)簽元素奴饮，這種就很好處理，直接寫在transition內(nèi)部即可
但是針對(duì)相同組件或者相同的標(biāo)簽元素切換時(shí)供填，就需要通過key的特性設(shè)置唯一的值來標(biāo)記拐云，讓Vue能夠區(qū)分他們是不同的，否則沒有元素的銷毀與創(chuàng)建的過程近她，在Vue中是直接進(jìn)行復(fù)用了叉瘩，也就是說，直接在組件或元素的內(nèi)部單純的將數(shù)據(jù)更新粘捎，重新渲染視圖薇缅，這樣動(dòng)畫添加則會(huì)失敗。
1攒磨、不加key值的情況：
<transition
name="custom-classes-transition"
enter-active-class="animated slideInLeft"
leave-active-class="animated slideOutRight">
<p v-if="isShow">測(cè)試Animate.css動(dòng)畫庫(kù)的動(dòng)畫效果</p>
<p v-else>測(cè)試同名組件或者標(biāo)簽動(dòng)畫</p>
</transition>
可以看出泳桦，雖然是兩個(gè)不同的p標(biāo)簽元素，以及內(nèi)容也不一樣娩缰，但是在渲染時(shí)灸撰，此時(shí)的p標(biāo)簽DOM并未發(fā)生重新生成，所以動(dòng)畫是沒有的。
2浮毯、添加key值的情況：
<transition
name="custom-classes-transition"
enter-active-class="animated slideInLeft"
leave-active-class="animated slideOutRight">
<p v-if="isShow" :key="1">測(cè)試Animate.css動(dòng)畫庫(kù)的動(dòng)畫效果</p>
<p v-else :key="2">測(cè)試同名組件或者標(biāo)簽動(dòng)畫</p>
</transition>
上圖可以看出來完疫，雖然是實(shí)現(xiàn)了動(dòng)畫效果的追加，但是貌似
動(dòng)畫效果是同一時(shí)間觸發(fā)的這個(gè)問題也就導(dǎo)致了動(dòng)畫效果有點(diǎn)沖突债蓝，樣式的重疊壳鹤。
1.3、解決動(dòng)畫效果同一時(shí)間觸發(fā)的問題
像上述的gif動(dòng)圖饰迹，在key值為1的標(biāo)簽leave的過程中芳誓，key值為2的標(biāo)簽就觸發(fā)了enter操作，那么在key為2的標(biāo)簽一進(jìn)去的時(shí)候啊鸭，上面那個(gè)元素還是處于占位的狀態(tài)锹淌，因此，這時(shí)莉掂，就需要加入一個(gè)模式mode屬性葛圃，來決定元素的出場(chǎng)順序。
mode屬性：
mode屬性共有兩種狀態(tài)憎妙，一是out-in库正，另外一種是in-out，字面意思上的理解就是這兩種模式的理解：一種是先離場(chǎng)再進(jìn)場(chǎng)厘唾，一種是先進(jìn)場(chǎng)再離場(chǎng)
示例：
<template>
<div id="demo">
<button @click="isShow = !isShow">click</button><br />
<transition name="myfade" mode="out-in">
<div v-if="isShow" :key="1">測(cè)試Animate.css動(dòng)畫庫(kù)的動(dòng)畫效果</div>
<div v-else :key="2">測(cè)試同名組件或者標(biāo)簽動(dòng)畫</div>
</transition>
</div>
</template>
<script>
export default {
name: "demo",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
/* 效果過程 */
.myfade-enter-active,
.myfade-leave-active {
transition: all 0.8s linear;
}
/* 進(jìn)場(chǎng)的瞬間與離場(chǎng)的效果添加 */
.myfade-enter,
.myfade-leave-to {
opacity: 0;
transform: translateX(200px);
}
</style>
這樣添加transition動(dòng)畫的一系列的問題大概分析清楚了褥符，就可以很好的去做需要做的動(dòng)畫效果了。
