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

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

定義動畫的方法有三種：

CSS transition

CSS animation

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' } }

查看完整例子?這里.

轉載于:https://www.cnblogs.com/avon/p/6030875.html

總結

以上是生活随笔為你收集整理的vue transition的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。