您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue3過渡動畫的方法”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue3過渡動畫的方法”吧!
Vue中中提供了transition組件,該組件可以在下列情況之一的情況下,為元素自動添加進(jìn)入/離開的過渡效果:
使用v-if條件渲染
使用v-show條件展示
動態(tài)組件
組件根節(jié)點(diǎn)
使用方式也比較簡單,需要將需要?jiǎng)赢嬚故镜慕M件或者元素使用<transition>組件包裹即可,然后定義一組class。
如下代碼展示了<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 */ } /* 進(jìn)入之前和離開后的樣式 */ .v-enter-from, .v-leave-to { opacity: 0; } /* 離開和進(jìn)入過程中的樣式 */ .v-enter-active, .v-leave-active { /* 添加過渡動畫 */ 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)入過渡的開始狀態(tài)。在元素被插入之前生效,在元素被插入之后的下一幀移除。
v-enter-active:定義進(jìn)入過渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過渡的階段中應(yīng)用,在元素被插入之前生效,在過渡/動畫完成之后移除。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間,延遲和曲線函數(shù)。
v-enter-to:定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter-from 被移除),在過渡/動畫完成之后移除。
v-leave-from:定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)立刻生效,下一幀被移除。
v-leave-active:定義離開過渡生效時(shí)的狀態(tài)。在整個(gè)離開過渡的階段中應(yīng)用,在離開過渡被觸發(fā)時(shí)立刻生效,在過渡/動畫完成之后移除。這個(gè)類可以被用來定義離開過渡的過程時(shí)間,延遲和曲線函數(shù)。
v-leave-to:離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave-from 被移除),在過渡/動畫完成之后移除。
下圖是Vue文檔中的一張圖,完美解釋了整個(gè)流程
<transition>組件的class名稱并不是必須以v-作為前綴的,其實(shí)我們可以自定義前綴,只需要添加一個(gè)name屬性,例如<transition name="ywz">,那么所有的前綴全部變成了ywz-。
前面我們使用了transition屬性實(shí)現(xiàn)了組件進(jìn)入和離開的過渡效果,現(xiàn)在我們可以使用animation屬性實(shí)現(xiàn),示例代碼如下:
<transition> <hello-world v-if="helloWorldShow" msg="【一碗周】過渡動畫演示demo" /> </transition>
css
/* 離開和進(jìn)入過程中的樣式 */ .v-enter-active, .v-leave-active { /* 添加過渡動畫 */ transition: opacity 0.5s ease; }
代碼運(yùn)行結(jié)果如下:
先看一個(gè)問題,當(dāng)動畫在兩個(gè)元素之間切換的時(shí)候,會出現(xiàn)一個(gè)問題,復(fù)現(xiàn)這個(gè)問題的代碼如下:
<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>
運(yùn)行效果如下:
我們可以看到,在一瞬間兩個(gè)組件是同時(shí)存在的,有的時(shí)候我們不需要這種效果,那么我們需要設(shè)置<transition>組件的過渡模式,也就是mode屬性,它包含三個(gè)值:
default:新元素與當(dāng)前元素同時(shí)進(jìn)行。
in-out:新元素先進(jìn)行進(jìn)入過渡,完成之后當(dāng)前元素過渡離開。
out-in:當(dāng)前元素先進(jìn)行離開過渡,完成之后新元素過渡進(jìn)入。
了解這個(gè)屬性之后,我們將代碼修改一下,修改后如下:
<transition mode="out-in"> <hello-world v-if="show" msg="【一碗周】過渡動畫演示demo" /> <img v-else alt="Vue logo" src="./assets/logo.png" /> </transition>
現(xiàn)在的運(yùn)行結(jié)果如下:
<transition>組件的appear屬性用于開啟首次渲染的動畫,它接受一個(gè)布爾值,示例代碼如下:
<transition mode="out-in" appear> <img v-if="show" alt="Vue logo" src="./assets/logo.png" /> </transition>
如果我們在實(shí)際的開發(fā)中自己去一個(gè)一個(gè)的編寫這些動畫序列,那么效率是比較低下的,所以我們經(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; }
<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>
到此,相信大家對“Vue3過渡動畫的方法”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。