Vue.js 教程 (9) : 過(guò)渡動(dòng)畫(huà)

Vue.js 提供非常簡(jiǎn)單的過(guò)渡動(dòng)畫(huà)接口。這些過(guò)渡動(dòng)畫(huà)在 Vue.js 將目標(biāo)元素插入或移除出 DOM 的時(shí)候會(huì)自動(dòng)執(zhí)行。能夠觸發(fā)動(dòng)畫(huà)的指令包括?v-if?,?v-show?和?v-repeat。同時(shí)，vm 實(shí)例的?$appendTo()?,?$before()?,?$after()?和?$remove()?方法也會(huì)觸發(fā)動(dòng)畫(huà)。

定義動(dòng)畫(huà)的方法有三種：

CSS transition

CSS animation

JavaScript 函數(shù)

CSS Transition

要使用 CSS Transition 動(dòng)畫(huà)，只需要在目標(biāo)元素上添加?v-transition?指令：

<p class="msg" v-if="show" v-transition>Hello!</p>

然后，你需要為目標(biāo)元素定義兩個(gè) CSS 類(lèi)：?.v-enter?和?.v-leave?. 這其中：

• .v-enter?代表元素剛剛被插入 DOM 瞬間的狀態(tài)。它會(huì)在插入前被添加，然后 Vue.js 會(huì)強(qiáng)制瀏覽器刷新視圖，然后?v-enter?會(huì)被立刻移除，從而觸發(fā) transition。
• .v-leave?代表元素即將被從 DOM 中移除的瞬間的狀態(tài)。Vue.js 會(huì)在偵聽(tīng)到?transitionend?事件以后移除它。

需要注意的是你得確保該元素在添加這兩個(gè)類(lèi)的時(shí)候會(huì)觸發(fā) CSS transition，不然 Vue.js 偵聽(tīng)不到?transitionend?事件，動(dòng)畫(huà)就卡在那里了。

.msg {transition: all .3s ease;height: 30px; padding: 10px; background-color: #eee; overflow: hidden; } .msg.v-enter, .msg.v-leave { height: 0; padding: 0 10px; opacity: 0; }

現(xiàn)在，當(dāng)?show?變化的時(shí)候，Vue.js 會(huì)插入/移除該元素，并自動(dòng)在合適的時(shí)候添加 CSS 類(lèi)。

CSS Animation

CSS Animation 使用方式和 transition 大同小異，換成使用?v-animation?指令，不同的地方是?v-enter?現(xiàn)在不是在插入后立刻移除，而是在偵聽(tīng)到?animationend?事件后才移除。

<p class="animated" v-if="show" v-animation>Look at me!</p>

CSS 里你需要定義兩個(gè)動(dòng)畫(huà) keyframes，分別對(duì)應(yīng)進(jìn)場(chǎng)和出場(chǎng)動(dòng)畫(huà)：（這里省略了webkit前綴）

.animated {display: inline-block; }.animated.v-enter { animation: fadein .5s; } .animated.v-leave { animation: fadeout .5s; } @keyframes fadein { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes fadeout { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(0); } }

JavaScript 函數(shù)動(dòng)畫(huà)

JS 函數(shù)動(dòng)畫(huà)需要通過(guò)?Vue.effect?方法來(lái)注冊(cè)一個(gè)效果，包括一個(gè)進(jìn)場(chǎng)函數(shù)和一個(gè)出場(chǎng)函數(shù)：

Vue.effect('my-effect', {enter: function (el, insert, timeout) { // insert() 會(huì)將元素插入 DOM }, leave: function (el, remove, timeout) { // remove() 會(huì)將元素移除出 DOM } }) <p v-effect="my-effect"></p>

第三個(gè)參數(shù)?timeout?是一個(gè) Vue.js 版本的?setTimeout?函數(shù)。使用方法完全一樣，但使用這個(gè)函數(shù)的好處是，當(dāng)一個(gè)元素的狀態(tài)切換過(guò)快，上一個(gè)動(dòng)畫(huà)函數(shù)設(shè)置的 timer 還沒(méi)有觸發(fā)就進(jìn)入下一個(gè)動(dòng)畫(huà)函數(shù)的時(shí)候， Vue.js 會(huì)確保之前未觸發(fā)的 timer 都被取消，不需要開(kāi)發(fā)者手動(dòng)管理 timer。

過(guò)渡動(dòng)效

<router-view>?是基本的動(dòng)態(tài)組件，所以我們可以用?<transition>?組件給它添加一些過(guò)渡效果：

<transition><router-view></router-view> </transition>

<transition>?的所有功能?在這里同樣適用。

單個(gè)路由的過(guò)渡

上面的用法會(huì)給所有路由設(shè)置一樣的過(guò)渡效果，如果你想讓每個(gè)路由組件有各自的過(guò)渡效果，可以在各路由組件內(nèi)使用?<transition>?并設(shè)置不同的 name。

const Foo = {template: `<transition name="slide"><div class="foo">...</div></transition>` }const Bar = {template: `<transition name="fade"><div class="bar">...</div></transition>` }

基于路由的動(dòng)態(tài)過(guò)渡

還可以基于當(dāng)前路由與目標(biāo)路由的變化關(guān)系，動(dòng)態(tài)設(shè)置過(guò)渡效果：

<!-- 使用動(dòng)態(tài)的 transition name --> <transition :name="transitionName"> <router-view></router-view> </transition> // 接著在父組件內(nèi) // watch $route 決定使用哪種過(guò)渡 watch: {'$route' (to, from) {const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } }

查看完整例子?這里.

轉(zhuǎn)載于:https://www.cnblogs.com/avon/p/6030875.html

總結(jié)

以上是生活随笔為你收集整理的vue transition的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。