先看上圖來了解 Vue 將動畫進入跟離開這 2 種階段,而在進入跟離開階段又分別配置了 3 種狀態 — 初始狀態(進入前、離開前)、進行中狀態、結束狀態(進入後、離開後)。
使用 CSS 操作過渡(轉場)及動畫效果 使用 CSS 操作過渡效果
Vue 文件是如何製作出過渡(轉場)及動畫效果,就是透過加入不同的 class
屬性來進行的。
在 Vue 文件中已經有詳細的說明這些 class
屬性是在那些時候出現及消失的,所以這邊就不細說,來看看實際上的變化。
從無到有
↓
↓
可以發現 .v-enter
並沒有出現在元素上,而僅僅是在 CSS 中定義該元素的初始值。 .v-enter-active
及 .v-enter-to
會在進行轉場效果時一起出現,並在轉場效果結束時一起消失。確定轉場效果結束後所有的 v-*
都會消失。
從有到無
↓
↓
使用命名 <transition name="transitionName">
來取代前綴詞 v
當我們使用未命名的 <transition>
時,是透過 CSS 操作 .v-*
來進行轉場或動畫效果的,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <button @click ="show=!show" > 切換</button > <transition > <p v-show ="show" > 我是要進行過渡的元素</p > </transition > <style > .v-enter ,.v-leave-to { opacity :0 ; } .v-enter-active ,.v-leave-active { transition : all 5s ; } .v-enter-to ,.v-leave { opacity :1 ; } </style > <script > const vm = new Vue({ el : "#vm" , data :{ show :false } }); </script >
但當我們有許多轉場或動畫時,就會很不方便,這時就可以使用命名 <transition name="transitionName">
來解決,而且命名 <transition name="transitionName">
也比較方便管理,此時的 transitionName
就會取代前綴詞 v
,例如 .v-enter
→ .transitionName-enter
、 .v-enter-active
→ .transitionName-enter-active
,以此類推。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <button @click ="show=!show" > 切換</button > <transition name ="fade" > <p v-show ="show" > 我是要進行過渡的元素</p > </transition > <style > .fade-enter ,.fade-leave-to { opacity :0 ; } .fade-enter-active ,.fade-leave-active { transition : all 5s ; } .fade-enter-to ,.fade-leave { opacity :1 ; } </style > <script > const vm = new Vue({ el : "#vm" , data :{ show :false } }); </script >
使用 CSS 操作動畫效果 其實使用 <transition>
來操作動畫效果的方法跟操作轉場效果的方法相同,唯一的不同點是操作動畫效果的時候不需要再設定初始跟結束狀態了,因為這些狀態在 CSS 動畫效果中已經設定好了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <button @click ="scale=!scale" class ="btn" > 切換</button > <transition name ="scale" > <p v-show ="scale" > 我是要進行動畫的元素</p > </transition > <style > .scale-enter-active { animation : bounce-in 5.5s ; } .scale-leave-active { animation : bounce-in 5.5s reverse; } @keyframes bounce-in { 0% { transform : scale (0 ); } 50% { transform : scale (1.5 ); } 100% { transform : scale (1 ); } } </style > <script > const vm = new Vue({ el : "#vm" , data :{ scale :false } }); </script >
結合第三方動畫庫來實現動畫效果 在了解如何使用第三方動畫庫之前,我們必須先了解使用的規則,在這裡我們使用 Animate.css 來作為第三方動畫庫來進行講解。
必須先明白要使用 Animate.css 時,要先載入該動畫庫。
透過 class
屬性來使用 Animate.css 時,必須注意一定要加入 animate__animated
及 animate__動畫效果名
。
1 2 3 4 <h1 class ="animate__animated animate__bounce animate__delay-2s" > An animated element</h1 >
透過 @keyframes
來使用 Animate.css 時,在該元素的 CSS 裡直接指定 Animate.css 的動畫名。
1 2 3 4 h1 { animation : bounce; animation-duration : 2s ; }
上面都是 Animate.css 給出的使用方法,想了解更多可以參考一下 Animate.css 文件,但要怎麼結合到 Vue 裡的 <transition>
呢?來分別講解一下 Animate.css 提供的 2 種不同的使用方法跟 Vue 的結合。
利用 @keyframes
這種方法也就是之前說的,利用 Vue 裡的 <transition>
會自動產生預設的 className 的特性(.v-*
或是 .transitionName-*
),然後結合 Animate.css 的中 @keyframes
使用方法來做動畫的。
這個跟上面的[使用 CSS 操作動畫效果](#使用 CSS 操作動畫效果)是相同的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <button @click ="show=!show" > 切換</button > <transition name ="bounce" > <p v-show ="show" > 我是要進行過渡的元素</p > </transition > <style > .bounce-enter-active { animation :bounceIn; animation-duration : 2s ; } .bounce-leave-active { animation :bounceOut; animation-duration : 2s ; } </style > <script > const vm = new Vue({ el : "#vm" , data :{ show :false } }); </script >
利用CSS
在 Vue 文件中有提到可以透過幾個屬性來更改 <transition>
預設的 class 屬性值( .v-*
或是 .transitionName-*
)。
所以可以利用這個方法讓元素在進行到 enter-active 這個階段時,讓自定義轉場 class 名取代 .v-*
或是 .transitionName-*
。
1 2 3 4 5 6 7 8 9 10 11 12 13 <button @click ="show=!show" > 切換</button > <transition enter-active-class ="animate__tada" leave-active-class ="animate__bounceOut " > <p v-show ="show" class ="animate__animated animate__slower" > 我是要進行過渡的元素</p > </transition > <script > const vm = new Vue({ el : "#vm" , data :{ show :false } }); </script >
在上面因為 .animate__animated
及 .animate__slower
是不影響動畫效果的,並且也是進入及離開動畫都會用到的相同 class ,考慮到 Vue 模組會將模組標籤的 class 跟模組內部的根元素的 class 組合在一起的特性(可以參考DAY12 | 跟 Vue.js 認識的30天 - Vue 模組資料傳遞(props
) ),所以將這些重複的 class 統一放在內部。
使用 :duration
設定拔掉轉場或動畫樣式的時間 剛開始以為 :duration
是指轉場或動畫樣式的持續時間經過操作才發現是完成轉場或動畫後,轉場或動畫樣式的 class 被拔除 的時間。
動態綁定 :duration
的值可以為數值或物件,利用數值即進入跟離開的樣式的 class 被拔除時間相同,而物件可以分開指定 class 被拔除的時間,如 :duration="{ enter: 500, leave: 800 }"
。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <button @click ="flash=!flash" > 切換</button > <transition name ="flash" :duration ="5000" > <p v-show ="flash" > 我是要進行過渡的元素</p > </transition > <style > .flash-enter-active ,.flash-leave-active { animation : flash 1s ; } @keyframes flash { 0% , 10% , 20% , 30% , 35% , 40% , 50% , 70% , 85% , 100% { opacity : 0 ; } 5% , 15% , 25% , 38% , 45% , 60% , 80% , 95% { opacity : 1 ; } } </style >
使用 JavaScript Hook 操作轉場及動畫效果 使用 JavaScript Hook 操作轉場及動畫效果,是利用事件監聽的方式( v-on
)來完成在動畫的每個階段可以處理的事件。
但是必須注意到一點,在使用 <transition>
時, Vue 會產生相應的 class ,如 .v-*
或是 .transitionName-*
,但如果我們是要直接使用 JavaScript Hook 來操作轉場或動畫效果時,將導致某些 class 會一直存在(如下圖)。
要解決這個問題很簡單就是在 <transition>
加上 :css="false"
來避免產生預設 class 。
1 <transition :css ="false" > </transition >
另外在條件渲染的方面,建議使用 v-if
,這是因為 v-if
是會將該元素或模組銷毀或重建,而 v-show
在使用 JavaScript Hook 操作 <transition>
時,會導致在不同事件發生時,上一個事件的樣式不會消失。
(使用 Velocity )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 <button @click ="jsHook=!jsHook" > 切換</button > <transition v-on:before-enter ="beforeEnter" v-on:enter ="enter" v-on:leave ="leave" v-bind:css ="false" > <p v-if ="jsHook" > 使用JavaScript Hook完成動畫</p > </transition > <script > const vm = new Vue({ el : "#vm" , data : { jsHook : false }, methods : { beforeEnter (el ) { console .log("beforeEnter" ); el.style.opacity = 0 ; el.style.transformOrigin = "left" ; }, enter (el, done ) { console .log("enter" ); Velocity(el, { opacity : 1 , fontSize : "1.4em" }, { duration : 1300 }); Velocity(el, { fontSize : "1em" }, { complete : done }); }, afterEnter (el ) { console .log("afterEnter" ); }, enterCancelled (el ) { console .log("enterCancelled" ); } , beforeLeave (el ) { console .log("beforeLeave" ); }, leave (el, done ) { console .log("leave" ); Velocity( el, { translateX : "15px" , rotateZ : "50deg" }, { duration : 1600 } ); Velocity(el, { rotateZ : "100deg" }, { loop : 2 }); Velocity( el, { rotateZ : "45deg" , translateY : "30px" , translateX : "30px" , opacity : 0 }, { complete : done } ); }, afterLeave (el ) { console .log("afterLeave" ); } } }); </script >
初始畫面的動畫渲染(畫面出現即產生動畫) 在 <transition>
標籤中加入屬性 appear
,來讓 Vue 知道這一個動畫(轉場)模組是要在初始畫面出現時就要產生動畫的。所以當初使畫面出現時,就直接套用 .transitionName-enter
、 .transitionName-enter-active
、 .transitionName-enter-to
等 class 效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <button @click ="appear=!appear" > 切換</button > <transition name ="appear" appear > <p v-show ="appear" > 我是要進行過渡的元素</p > </transition > <style > .appear-enter ,.appear-leave-to { opacity : 0 ; } .appear-enter-active ,.appear-leave-active { transition : all 10s ; } .appear-enter-to ,.appear-leave { opacity : 1 ; } </style >
但如果是想要初始畫面的動畫效果是特殊的,那就可以利用自定義 class 來將該初始畫面的動畫效果特別化。
初始畫面的動畫的自定義 class :
appear-class="customAppearName"
appear-active-class"customAppearActiveName"
appear-to-class"customAppearToName"
需要特別注意一點 appear
只針對初始畫面,該元素是存在時才會有動畫效果,所以在初始畫面中該元素為 v-show="false"
或 v-if="false"
時,加上 appear
並不會有任何效果,也因此 appear
是只有使用進入動畫的 class 。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <button @click ="appear=!appear" > 切換</button > <transition name ="appear" appear appear-class ="custom-appear" appear-active-class ="custom-appear-active" appear-to-class ="custom-appear-to" > <p v-show ="appear" > 我是要進行過渡的元素</p > </transition > <style > .custom-appear { opacity : 0 ; } .custom-appear-active { transition : all 10s ; } .custom-appear-to { opacity : 1 ; } </style >
appear
效果也能通過 JavaScript Hook 來達成,但如同上面所說的 appear
只針對初始畫面,該元素是存在時才會有動畫效果,所以在使用時也只有進入動畫的 JavaScript Hook 。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <button @click ="appear=!appear" > 切換</button > <transition appear v-on:before-appear ="beforeAppear" v-on:appear ="appear" v-on:after-appear ="afterAppear" v-on:appear-cancelled ="appearCancelled" v-bind:css ="false" > <p v-if ="jsHook" > 使用JavaScript Hook完成動畫</p > </transition > <script > const vm = new Vue({ el : "#vm" , data : { jsHook : false }, methods : { beforeAppear (el ) { console .log("beforeEnter" ); el.style.opacity = 0 ; el.style.transformOrigin = "left" ; }, appear (el, done ) { console .log("enter" ); Velocity(el, { opacity : 1 , fontSize : "1.4em" }, { duration : 1300 }); Velocity(el, { fontSize : "1em" }, { complete : done }); }, afterAppear (el ) { console .log("afterEnter" ); }, appearCancelled (el ) { console .log("enterCancelled" ); } } }); </script >
因為 Vue.js - 进入/离开 & 列表过渡 實在太多了,所以剩下的就留到下一篇記錄了。
Demo:
See the Pen
DAY16 | 跟 Vue.js 認識的30天 - Vue 過渡及動畫效果 by Celeste6666 (@celeste6666 )
on CodePen .
參考資料:
Vue.js - 进入/离开 & 列表过渡