Vue中如何實現過渡動畫?以下這篇文章為大家介紹一下在Vue3中實現過渡動畫的兩種方法(transition元件和動畫庫),希望對大家有幫助!
在實際開發中,為了增加使用者體驗,經常會使用到過渡動畫,而過渡動畫在CSS中是透過transition
和animation
實現的。而在Vue中,Vue本身內建了一些元件和API可以幫助我們方便的實現過渡動畫效果;接下來我們就學習一下。
Vue中提供了transition
元件,該元件可以在下列情況之一的情況下,為元素自動加入進入/離開的過渡效果:
v-if
條件渲染v-show
條件展示使用方式也比較簡單,需要將需要動畫展示的元件或元素使用<transition></transition>
元件包裹即可,然後定義一組class
。 【相關推薦:vue.js影片教學】
如下程式碼展示了<transition></transition>
元件的基本用法:
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 |
|
程式碼的運行結果如下圖所示:
上面使用的一些class
,他們的意義如下所示:
v-enter-from
:定義進入過渡的開始狀態。在元素被插入之前生效,在元素被插入之後的下一幀移除。 v-enter-active
:定義進入過渡生效時的狀態。在整個進入過渡的階段中應用,在元素插入之前生效,在過渡/動畫完成之後移除。這個類別可以被用來定義進入過渡的過程時間,延遲和曲線函數。 v-enter-to
:定義進入過渡的結束狀態。在元素插入之後下一幀生效 (同時 v-enter-from
被移除),在過渡/動畫完成之後移除。 v-leave-from
:定義離開過渡的開始狀態。在離開過渡期被觸發時立刻生效,下一幀被移除。 v-leave-active
:定義離開過渡生效時的狀態。在整個離開過渡的階段中應用,在離開過渡被觸發時立刻生效,在過渡/動畫完成之後移除。這個類別可以被用來定義離開過渡的過程時間,延遲和曲線函數。 v-leave-to
:離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave-from
被移除),在過渡/動畫完成之後移除。 下圖是Vue文件中的一張圖,完美解釋了整個流程
<transition>
元件的class
名稱並不是必須以v-
作為前綴的,其實我們可以自訂前綴,只需要加入一個name
屬性,例如<transition name="ywz">
,那麼所有的前綴都變成了ywz-
。
前面我們使用了transition
屬性實現了元件進入和離開的過渡效果,現在我們可以使用animation
屬性實現,範例程式碼如下:
1 2 3 |
|
css
1 2 3 4 5 6 |
|
程式碼運行結果如下:
先看一個問題,當動畫在兩個元素之間切換的時候,會出現一個問題,復現這個問題的程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
運行效果如下:
我們可以看到,在一瞬間兩個元件是同時存在的,有的時候我們不需要這種效果,那麼我們需要設定<transition>
元件的過渡模式,也就是mode
屬性,它包含三個值:
default
:新元素与当前元素同时进行。in-out
:新元素先进行进入过渡,完成之后当前元素过渡离开。out-in
:当前元素先进行离开过渡,完成之后新元素过渡进入。了解这个属性之后,我们将代码修改一下,修改后如下:
1 2 3 4 |
|
现在的运行结果如下:
<transition>
组件的appear
属性用于开启手册渲染的动画,它接受一个布尔值,示例代码如下:
1 2 3 |
|
如果我们在实际的开发中自己去一个一个的编写这些动画序列,那么效率是比较低下的,所以我们经常会用到一些动画库,最常见的就是animate.css
。
现在我们就来看那一下如何在Vue中使用animate.css
:
安装animate.css
1 |
|
引入animate.css
1 |
|
1 2 3 4 5 6 |
|
<transition>
组件还提供了属性来自定义过渡class
,具体如下:
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class
他们的优先级会高于普通的类名。
1 2 3 4 5 6 7 |
|
本篇文章介绍了过渡的基本使用,掌握Vue提供的<transition></transition>
组件配合animate.css
可以轻松实现过渡动画。
除了单个组件的过渡外,Vue还提供了TransitionGroup组件,用于实现多个组件的过渡动画,我们以后介绍。
更多编程相关知识,请访问:编程视频!!
以上是Vue3中如何實現過渡動畫?元件和動畫庫方法解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!