十分鐘帶你快速上手Vue3過渡動畫
寫在前面
在實際開發(fā)中,為了增加用戶體驗,經(jīng)常會使用到過渡動畫,而過渡動畫在CSS中是通過transition和animation實現(xiàn)的。而在Vue中,Vue本身中內(nèi)置了一些組件和API可以幫助我們方便的實現(xiàn)過渡動畫效果;接下來我們就學(xué)習(xí)一下。
Vue的transition組件
Vue中中提供了transition組件,該組件可以在下列情況之一的情況下,為元素自動添加進入/離開的過渡效果:
- 使用v-if條件渲染
- 使用v-show條件展示
- 動態(tài)組件
- 組件根節(jié)點
使用方式也比較簡單,需要將需要動畫展示的組件或者元素使用<transition>組件包裹即可,然后定義一組class。
過渡demo
如下代碼展示了<transition>組件的基本用法:
<template> <button class="btn btn-primary" @click="helloWorldShow = !helloWorldShow"> 顯示與隱藏 </button> <br /> <img alt="Vue logo" src="./assets/logo.png" /> <transition> <hello-world v-if="helloWorldShow" msg="【一碗周】過渡動畫演示demo" /> </transition> </template> <script setup> import { ref } from 'vue' import HelloWorld from './components/HelloWorld.vue' const helloWorldShow = ref(true) </script> <style> #app { /* more css */ } /* 進入之前和離開后的樣式 */ .v-enter-from, .v-leave-to { opacity: 0; } /* 離開和進入過程中的樣式 */ .v-enter-active, .v-leave-active { /* 添加過渡動畫 */ transition: opacity 0.5s ease; } /* 進入之后和離開之前的樣式 */ .v-enter-to, .v-leave-from { opacity: 1; } </style>
代碼的運行結(jié)果如下圖所示:
上面使用的一些class,他們的含義如下所示:
- v-enter-from:定義進入過渡的開始狀態(tài)。在元素被插入之前生效,在元素被插入之后的下一幀移除。
- v-enter-active:定義進入過渡生效時的狀態(tài)。在整個進入過渡的階段中應(yīng)用,在元素被插入之前生效,在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間,延遲和曲線函數(shù)。
- v-enter-to:定義進入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時 v-enter-from 被移除),在過渡/動畫完成之后移除。
- v-leave-from:定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時立刻生效,下一幀被移除。
- v-leave-active:定義離開過渡生效時的狀態(tài)。在整個離開過渡的階段中應(yīng)用,在離開過渡被觸發(fā)時立刻生效,在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間,延遲和曲線函數(shù)。
- v-leave-to:離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時 v-leave-from 被移除),在過渡/動畫完成之后移除。
下圖是Vue文檔中的一張圖,完美解釋了整個流程
class的命名規(guī)則
<transition>組件的class名稱并不是必須以v-作為前綴的,其實我們可以自定義前綴,只需要添加一個name屬性,例如<transition name="ywz">,那么所有的前綴全部變成了ywz-。
使用animation
前面我們使用了transition屬性實現(xiàn)了組件進入和離開的過渡效果,現(xiàn)在我們可以使用animation屬性實現(xiàn),示例代碼如下:
<transition> <hello-world v-if="helloWorldShow" msg="【一碗周】過渡動畫演示demo" /> </transition>
css
/* 離開和進入過程中的樣式 */ .v-enter-active, .v-leave-active { /* 添加過渡動畫 */ transition: opacity 0.5s ease; }
代碼運行結(jié)果如下:
過渡模式
先看一個問題,當(dāng)動畫在兩個元素之間切換的時候,會出現(xiàn)一個問題,復(fù)現(xiàn)這個問題的代碼如下:
<template> <button class="btn btn-primary" @click="show = !show">顯示與隱藏</button> <br /> <transition> <hello-world v-if="show" msg="【一碗周】過渡動畫演示demo" /> <img v-else alt="Vue logo" src="./assets/logo.png" /> </transition> </template> <script setup> import { ref } from 'vue' import HelloWorld from './components/HelloWorld.vue' const show = ref(true) </script> <style> /* 省略 */ </style>
運行效果如下:
我們可以看到,在一瞬間兩個組件是同時存在的,有的時候我們不需要這種效果,那么我們需要設(shè)置<transition>組件的過渡模式,也就是mode屬性,它包含三個值:
- default:新元素與當(dāng)前元素同時進行。
- in-out:新元素先進行進入過渡,完成之后當(dāng)前元素過渡離開。
- out-in:當(dāng)前元素先進行離開過渡,完成之后新元素過渡進入。
了解這個屬性之后,我們將代碼修改一下,修改后如下:
<transition mode="out-in"> <hello-world v-if="show" msg="【一碗周】過渡動畫演示demo" /> <img v-else alt="Vue logo" src="./assets/logo.png" /> </transition>
現(xiàn)在的運行結(jié)果如下:
appear屬性
<transition>組件的appear屬性用于開啟首次渲染的動畫,它接受一個布爾值,示例代碼如下:
<transition mode="out-in" appear> <img v-if="show" alt="Vue logo" src="./assets/logo.png" /> </transition>
animate.css庫的使用
如果我們在實際的開發(fā)中自己去一個一個的編寫這些動畫序列,那么效率是比較低下的,所以我們經(jīng)常會用到一些動畫庫,最常見的就是animate.css。
現(xiàn)在我們就來看那一下如何在Vue中使用animate.css:
- 安裝animate.css
npm i animate.css
- 引入animate.css
// main.js import 'animate.css'
使用動畫序列
.v-enter-active { animation: fadeInDown 0.5s; } .v-leave-active { animation: fadeOutDown 0.5s; }
使用自定義過渡class
<transition>組件還提供了屬性來自定義過渡class,具體如下:
- enter-from-class
- enter-active-class
- enter-to-class
- leave-from-class
- leave-active-class
- leave-to-class
他們的優(yōu)先級會高于普通的類名。
<transition mode="out-in" enter-active-class="animate__animated animate__fadeInDown" leave-active-class="animate__animated animate__fadeOutDown" > <img v-if="show" alt="Vue logo" src="./assets/logo.png" /> </transition>
寫在最后
本篇文章介紹了過渡的基本使用,掌握Vue提供的<transition>組件配合animate.css可以輕松實現(xiàn)過渡動畫。
除了單個組件的過渡外,Vue還提供了TransitionGroup組件,用于實現(xiàn)多個組件的過渡動畫,我們以后介紹。
到此這篇關(guān)于十分鐘帶你快速上手Vue3過渡動畫的文章就介紹到這了,更多相關(guān)Vue3過渡動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!