《Vue.js 前端開發(fā)技術(shù)與實(shí)踐》課件-第7章 vue過渡與動(dòng)畫

第7章Vue過渡與動(dòng)畫

transition組件Vue提供了transition組件，在條件渲染(使用v-if)、條件展示(使用v-show)、動(dòng)態(tài)組件及組件根節(jié)點(diǎn)可以給任何元素和組件添加進(jìn)入/離開過渡。transition組件只會(huì)把過渡效果應(yīng)用到其包裹的內(nèi)容上。transition組件應(yīng)用CSS過渡或動(dòng)畫Vue為<transition>標(biāo)簽內(nèi)部的元素提供了3個(gè)進(jìn)入過渡的類和3個(gè)離開過渡的類，共6個(gè)類，如下表所示：過渡類型說明v-enter進(jìn)入過渡的開始狀態(tài)，作用于開始的一幀v-enter-active進(jìn)入過渡生效時(shí)的狀態(tài)，作用于整個(gè)過程v-enter-to進(jìn)入過渡的結(jié)束狀態(tài)，作用于結(jié)束的一幀v-leave離開過渡的開始狀態(tài)，作用于開始的一幀v-leave-active離開過渡生效時(shí)的狀態(tài)，作用于整個(gè)過程v-leave-to離開過渡的結(jié)束狀態(tài)，作用于結(jié)束的一幀在進(jìn)入/離開的過渡中，這6個(gè)類之間切換，在一個(gè)過渡周期中這6個(gè)類存在的時(shí)間點(diǎn)如圖所示。自定義類名對(duì)于這些在過渡中切換的類名來說，如果使用一個(gè)沒有name屬性的<transition>，則v-是這些類名的默認(rèn)前綴。如果使用了name屬性，那么這些類名的前綴就是name屬性值-，如<transitionname="my-transition">，那么v-enter會(huì)替換為my-transition-enter。單元素/組件過渡transition組件中只包裹一個(gè)元素，在該元素插入或刪除時(shí)定義過渡動(dòng)畫。

<transition

name="fade"

>

<p

v-if="already"><button>取號(hào)預(yù)報(bào)名</button></p>

</transition>

/*.fade-enter定義進(jìn)入過渡的開始狀態(tài)*/

/*.fade-leave-to定義離開過渡的結(jié)束狀態(tài)*/

.fade-enter,

.fade-leave-to

{

opacity:

0;

transform:

translateX(100px);

}

/*進(jìn)入過渡和離開過渡的過程中

*/

.fade-enter-active,

.fade-leave-active

{

transition:

all

2s;

}多個(gè)元素過渡transition組件中包裹多個(gè)元素，這些元素插入或刪除時(shí)定義過渡動(dòng)畫。<transition

name="fade"

appear

mode="out-in">

<p

v-if="copyright"

key="1">

<button>取號(hào)預(yù)報(bào)名</button>

</p>

<p

v-else

key="2">

先閱讀報(bào)名需知后報(bào)名</p>

</transition>過渡模式新舊兩個(gè)元素參與過渡的時(shí)候，新元素的進(jìn)入和舊元素的離開會(huì)同時(shí)觸發(fā)，這是因?yàn)?lt;transition>的默認(rèn)行為進(jìn)入和離開同時(shí)發(fā)生了。如果要求離開的元素完全消失后，進(jìn)入的元素再顯示出來（如開關(guān)的切換），可以使用transition提供的過渡模式mode，來解決當(dāng)一個(gè)組件離開后，另一個(gè)組件進(jìn)來時(shí)發(fā)生的位置的閃動(dòng)或阻塞問題。過渡模式過渡模式的原理是，設(shè)置有序的過渡而不是同時(shí)發(fā)生過渡。在transition中加入mode屬性，它的兩個(gè)值如下所示。in-out：表示新元素先進(jìn)行過渡，完成之后當(dāng)前元素過渡離開out-in：表示當(dāng)前元素先進(jìn)行過渡，完成之后新元素過渡進(jìn)入多個(gè)組件過渡多個(gè)組件的過渡較為簡(jiǎn)單，不需要使用key屬性，只需要使用動(dòng)態(tài)組件。列表過渡（1）<transition-group>組件渲染時(shí)它會(huì)以一個(gè)真實(shí)元素呈現(xiàn)：默認(rèn)為一個(gè)<span>，可以通過tag屬性更換為其他元素。（2）<transition-group>組件mode屬性不可以用，不能設(shè)置過渡模式，不用相互切換特有的元素。（3）內(nèi)部元素總是需要提供唯一的key屬性值。（4）CSS過渡的類將會(huì)應(yīng)用在內(nèi)部的元素中，而不是這個(gè)組件/容器本身。列表過渡使用transition-group組件使用過渡鉤子函數(shù)實(shí)現(xiàn)過渡動(dòng)畫可以在使用transition組件時(shí)通過v-on指定綁定JavaScript鉤子，transition過渡周期有如下這些鉤子。<transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancelled="enterCancelled"v-on:before-leave="beforeLeave"v-on:leave="leave"v-on:after-leave="afterLeave"v-on: