基本概念

Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果

• 在 CSS 過(guò)渡和動(dòng)畫(huà)中自動(dòng)應(yīng)用 class
• 可以配合使用第三方 CSS 動(dòng)畫(huà)庫(kù)，如 Animate.css
• 在過(guò)渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 動(dòng)畫(huà)庫(kù)，如 Velocity.js

簡(jiǎn)單用法

• 用 v-if/v-show 控制顯示隱藏，使用transition 組件控制其變化過(guò)程
• 一個(gè)頁(yè)面子組件 router-view 的消失隱藏，使用transition 組件控制其變化過(guò)程

<template>
// 子組件
	<transition name="fade1">
 	<router-view></router-view>
	</transition>
// if/show控制
	<transition name="fade2">
 	<div v-show="isTage"></div>
	</transition>
</template>

類(lèi)名介紹

1. v-enter ：定義進(jìn)入過(guò)渡的開(kāi)始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。
2. v-enter-active ：定義進(jìn)入過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過(guò)渡的階段中應(yīng)用，在元素被插入之前生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義進(jìn)入過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
3. v-enter-to : 2.1.8版及以上 定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter 被移除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。
4. v-leave : 定義離開(kāi)過(guò)渡的開(kāi)始狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，下一幀被移除。
5. v-leave-active ：定義離開(kāi)過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)離開(kāi)過(guò)渡的階段中應(yīng)用，在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義離開(kāi)過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
6. v-leave-to : 2.1.8版及以上 定義離開(kāi)過(guò)渡的結(jié)束狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave 被刪除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。

以上為vuejs官網(wǎng)介紹 下面我平時(shí)記載的筆記，結(jié)合圖文，更容易理解些

變化原理

動(dòng)畫(huà)流程出現(xiàn)：

開(kāi)始前一幀： 點(diǎn)擊出現(xiàn)動(dòng)畫(huà)，元素由none變?yōu)閎lock，動(dòng)畫(huà)開(kāi)始前一幀，插入 opacity:0 屬性 “1” ，和監(jiān)聽(tīng)opacity屬性變化時(shí)間為3s “2”

動(dòng)畫(huà)第二幀： opacity:0 ，屬性 “1” 去除，引起**“2”**監(jiān)聽(tīng)執(zhí)行時(shí)間變化

動(dòng)畫(huà)最后一幀： 動(dòng)畫(huà)結(jié)束，去除所有

 動(dòng)畫(huà)流程消失：

開(kāi)始前一幀： 點(diǎn)擊消失動(dòng)畫(huà)，元素由block變?yōu)閚one，動(dòng)畫(huà)開(kāi)始前一幀，只插入監(jiān)聽(tīng)opacity屬性變化時(shí)間為3s “4”

動(dòng)畫(huà)第二幀： 插入， “3” 屬性opacity:0引起 “2” 監(jiān)聽(tīng)執(zhí)行事件變化

動(dòng)畫(huà)最后一幀： 動(dòng)畫(huà)結(jié)束，去除所有

平時(shí)功能加個(gè)過(guò)渡動(dòng)畫(huà)看著兩個(gè)圖足夠了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論