vue transition

Vue.js 教程 (9) : 過渡動畫

Vue.js 提供很是簡單的過渡動畫接口。這些過渡動畫在 Vue.js 將目標元素插入或移除出 DOM 的時候會自動執行。可以觸發動畫的指令包括 v-if , v-show 和 v-repeat。同時，vm 實例的 $appendTo() , $before() , $after() 和 $remove() 方法也會觸發動畫。

定義動畫的方法有三種：

1. CSS transition
2. CSS animation
3. JavaScript 函數

CSS Transition

要使用 CSS Transition 動畫，只須要在目標元素上添加 v-transition 指令：

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

而後，你須要爲目標元素定義兩個 CSS 類： .v-enter 和 .v-leave . 這其中：

• .v-enter 表明元素剛剛被插入 DOM 瞬間的狀態。它會在插入前被添加，而後 Vue.js 會強制瀏覽器刷新視圖，而後 v-enter 會被馬上移除，從而觸發 transition。
• .v-leave 表明元素即將被從 DOM 中移除的瞬間的狀態。Vue.js 會在偵聽到 transitionend 事件之後移除它。

須要注意的是你得確保該元素在添加這兩個類的時候會觸發 CSS transition，否則 Vue.js 偵聽不到 transitionend 事件，動畫就卡在那裏了。

.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; }

如今，當 show 變化的時候，Vue.js 會插入/移除該元素，並自動在合適的時候添加 CSS 類。

CSS Animation

CSS Animation 使用方式和 transition 大同小異，換成使用 v-animation 指令，不一樣的地方是 v-enter 如今不是在插入後馬上移除，而是在偵聽到 animationend 事件後才移除。

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

CSS 裏你須要定義兩個動畫 keyframes，分別對應進場和出場動畫：（這裏省略了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 函數動畫

JS 函數動畫須要經過 Vue.effect 方法來註冊一個效果，包括一個進場函數和一個出場函數：

Vue.effect('my-effect', { enter: function (el, insert, timeout) { // insert() 會將元素插入 DOM }, leave: function (el, remove, timeout) { // remove() 會將元素移除出 DOM } })

<p v-effect="my-effect"></p>

第三個參數 timeout 是一個 Vue.js 版本的 setTimeout 函數。使用方法徹底同樣，但使用這個函數的好處是，當一個元素的狀態切換過快，上一個動畫函數設置的 timer 尚未觸發就進入下一個動畫函數的時候， Vue.js 會確保以前未觸發的 timer 都被取消，不須要開發者手動管理 timer。

過渡動效

<router-view> 是基本的動態組件，因此咱們能夠用 <transition> 組件給它添加一些過渡效果：

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

<transition> 的全部功能 在這裏一樣適用。

單個路由的過渡

上面的用法會給全部路由設置同樣的過渡效果，若是你想讓每一個路由組件有各自的過渡效果，能夠在各路由組件內使用 <transition> 並設置不一樣的 name。

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

基於路由的動態過渡

還能夠基於當前路由與目標路由的變化關係，動態設置過渡效果：

<!-- 使用動態的 transition name --> <transition :name="transitionName"> <router-view></router-view> </transition> 

// 接着在父組件內 // watch $route 決定使用哪一種過渡 watch: { '$route' (to, from) { const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } } 

查看完整例子 這裏.