十分鐘帶你快速上手Vue3過(guò)渡動(dòng)畫
寫在前面
在實(shí)際開發(fā)中,為了增加用戶體驗(yàn),經(jīng)常會(huì)使用到過(guò)渡動(dòng)畫,而過(guò)渡動(dòng)畫在CSS中是通過(guò)transition和animation實(shí)現(xiàn)的。而在Vue中,Vue本身中內(nèi)置了一些組件和API可以幫助我們方便的實(shí)現(xiàn)過(guò)渡動(dòng)畫效果;接下來(lái)我們就學(xué)習(xí)一下。
Vue的transition組件
Vue中中提供了transition組件,該組件可以在下列情況之一的情況下,為元素自動(dòng)添加進(jìn)入/離開的過(guò)渡效果:
- 使用v-if條件渲染
- 使用v-show條件展示
- 動(dòng)態(tài)組件
- 組件根節(jié)點(diǎn)
使用方式也比較簡(jiǎn)單,需要將需要?jiǎng)赢嬚故镜慕M件或者元素使用<transition>組件包裹即可,然后定義一組class。
過(guò)渡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="【一碗周】過(guò)渡動(dòng)畫演示demo" /> </transition> </template> <script setup> import { ref } from 'vue' import HelloWorld from './components/HelloWorld.vue' const helloWorldShow = ref(true) </script> <style> #app { /* more css */ } /* 進(jìn)入之前和離開后的樣式 */ .v-enter-from, .v-leave-to { opacity: 0; } /* 離開和進(jìn)入過(guò)程中的樣式 */ .v-enter-active, .v-leave-active { /* 添加過(guò)渡動(dòng)畫 */ transition: opacity 0.5s ease; } /* 進(jìn)入之后和離開之前的樣式 */ .v-enter-to, .v-leave-from { opacity: 1; } </style>
代碼的運(yùn)行結(jié)果如下圖所示:
上面使用的一些class,他們的含義如下所示:
- v-enter-from:定義進(jìn)入過(guò)渡的開始狀態(tài)。在元素被插入之前生效,在元素被插入之后的下一幀移除。
- v-enter-active:定義進(jìn)入過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過(guò)渡的階段中應(yīng)用,在元素被插入之前生效,在過(guò)渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來(lái)定義進(jìn)入過(guò)渡的過(guò)程時(shí)間,延遲和曲線函數(shù)。
- v-enter-to:定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter-from 被移除),在過(guò)渡/動(dòng)畫完成之后移除。
- v-leave-from:定義離開過(guò)渡的開始狀態(tài)。在離開過(guò)渡被觸發(fā)時(shí)立刻生效,下一幀被移除。
- v-leave-active:定義離開過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)離開過(guò)渡的階段中應(yīng)用,在離開過(guò)渡被觸發(fā)時(shí)立刻生效,在過(guò)渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來(lái)定義離開過(guò)渡的過(guò)程時(shí)間,延遲和曲線函數(shù)。
- v-leave-to:離開過(guò)渡的結(jié)束狀態(tài)。在離開過(guò)渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave-from 被移除),在過(guò)渡/動(dòng)畫完成之后移除。
下圖是Vue文檔中的一張圖,完美解釋了整個(gè)流程
class的命名規(guī)則
<transition>組件的class名稱并不是必須以v-作為前綴的,其實(shí)我們可以自定義前綴,只需要添加一個(gè)name屬性,例如<transition name="ywz">,那么所有的前綴全部變成了ywz-。
使用animation
前面我們使用了transition屬性實(shí)現(xiàn)了組件進(jìn)入和離開的過(guò)渡效果,現(xiàn)在我們可以使用animation屬性實(shí)現(xiàn),示例代碼如下:
<transition> <hello-world v-if="helloWorldShow" msg="【一碗周】過(guò)渡動(dòng)畫演示demo" /> </transition>
css
/* 離開和進(jìn)入過(guò)程中的樣式 */ .v-enter-active, .v-leave-active { /* 添加過(guò)渡動(dòng)畫 */ transition: opacity 0.5s ease; }
代碼運(yùn)行結(jié)果如下:
過(guò)渡模式
先看一個(gè)問(wèn)題,當(dāng)動(dòng)畫在兩個(gè)元素之間切換的時(shí)候,會(huì)出現(xiàn)一個(gè)問(wèn)題,復(fù)現(xiàn)這個(gè)問(wèn)題的代碼如下:
<template> <button class="btn btn-primary" @click="show = !show">顯示與隱藏</button> <br /> <transition> <hello-world v-if="show" msg="【一碗周】過(guò)渡動(dòng)畫演示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>
運(yùn)行效果如下:
我們可以看到,在一瞬間兩個(gè)組件是同時(shí)存在的,有的時(shí)候我們不需要這種效果,那么我們需要設(shè)置<transition>組件的過(guò)渡模式,也就是mode屬性,它包含三個(gè)值:
- default:新元素與當(dāng)前元素同時(shí)進(jìn)行。
- in-out:新元素先進(jìn)行進(jìn)入過(guò)渡,完成之后當(dāng)前元素過(guò)渡離開。
- out-in:當(dāng)前元素先進(jìn)行離開過(guò)渡,完成之后新元素過(guò)渡進(jìn)入。
了解這個(gè)屬性之后,我們將代碼修改一下,修改后如下:
<transition mode="out-in"> <hello-world v-if="show" msg="【一碗周】過(guò)渡動(dòng)畫演示demo" /> <img v-else alt="Vue logo" src="./assets/logo.png" /> </transition>
現(xiàn)在的運(yùn)行結(jié)果如下:
appear屬性
<transition>組件的appear屬性用于開啟首次渲染的動(dòng)畫,它接受一個(gè)布爾值,示例代碼如下:
<transition mode="out-in" appear> <img v-if="show" alt="Vue logo" src="./assets/logo.png" /> </transition>
animate.css庫(kù)的使用
如果我們?cè)趯?shí)際的開發(fā)中自己去一個(gè)一個(gè)的編寫這些動(dòng)畫序列,那么效率是比較低下的,所以我們經(jīng)常會(huì)用到一些動(dòng)畫庫(kù),最常見的就是animate.css。
現(xiàn)在我們就來(lái)看那一下如何在Vue中使用animate.css:
- 安裝animate.css
npm i animate.css
- 引入animate.css
// main.js import 'animate.css'
使用動(dòng)畫序列
.v-enter-active { animation: fadeInDown 0.5s; } .v-leave-active { animation: fadeOutDown 0.5s; }
使用自定義過(guò)渡class
<transition>組件還提供了屬性來(lái)自定義過(guò)渡class,具體如下:
- enter-from-class
- enter-active-class
- enter-to-class
- leave-from-class
- leave-active-class
- leave-to-class
他們的優(yōu)先級(jí)會(huì)高于普通的類名。
<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>
寫在最后
本篇文章介紹了過(guò)渡的基本使用,掌握Vue提供的<transition>組件配合animate.css可以輕松實(shí)現(xiàn)過(guò)渡動(dòng)畫。
除了單個(gè)組件的過(guò)渡外,Vue還提供了TransitionGroup組件,用于實(shí)現(xiàn)多個(gè)組件的過(guò)渡動(dòng)畫,我們以后介紹。
到此這篇關(guān)于十分鐘帶你快速上手Vue3過(guò)渡動(dòng)畫的文章就介紹到這了,更多相關(guān)Vue3過(guò)渡動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- react組件中過(guò)渡動(dòng)畫的問(wèn)題解決
- vue實(shí)現(xiàn)過(guò)渡動(dòng)畫Message消息提示組件示例詳解
- Flutter添加頁(yè)面過(guò)渡動(dòng)畫實(shí)現(xiàn)步驟
- vue實(shí)現(xiàn)列表滾動(dòng)的過(guò)渡動(dòng)畫
- vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫效果
- 使用vue-router切換頁(yè)面時(shí)實(shí)現(xiàn)設(shè)置過(guò)渡動(dòng)畫
- 原生JS實(shí)現(xiàn)Vue transition fade過(guò)渡動(dòng)畫效果示例
相關(guān)文章
Vue中實(shí)現(xiàn)權(quán)限控制的方法示例
這篇文章主要介紹了Vue中實(shí)現(xiàn)權(quán)限控制的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06vue 實(shí)現(xiàn)的樹形菜的實(shí)例代碼
這篇文章主要介紹了vue 實(shí)現(xiàn)的樹形菜單,需要的朋友可以參考下2018-03-03Vue+Echarts實(shí)現(xiàn)基本K線圖的繪制
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)基本K線圖的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03使用vue.js寫一個(gè)tab選項(xiàng)卡效果
Vue 實(shí)現(xiàn) Tab切換實(shí)現(xiàn)的場(chǎng)景很多,比如,利用vue-router、利用第三方插件、利用組件等等.本文使用組件來(lái)實(shí)踐tab選項(xiàng)卡2017-03-03Vue 構(gòu)造選項(xiàng) - 進(jìn)階使用說(shuō)明
這篇文章主要介紹了Vue 構(gòu)造選項(xiàng) - 進(jìn)階使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08