本文已整理到 Github,地址 ?? blog。
如果我的內(nèi)容幫助到了您梯找,歡迎點個 Star
?????? 鼓勵鼓勵 :) ~~
我希望我的內(nèi)容可以幫助你⊙枰В現(xiàn)在我專注于前端領(lǐng)域,但我也將分享我在有限的時間內(nèi)看到和感受到的東西当凡。
Vue 過渡和動畫是使您的網(wǎng)站更具現(xiàn)代感并為網(wǎng)站訪問者提供更好的用戶體驗的好方法。
為了適應(yīng)廣泛的開發(fā)人員,Vue 提供了幾種方法來實現(xiàn)過渡:
- CSS 過渡/動畫樣式
- Javascript 鉤子可以對 DOM 進行編輯
- 使用第三方 CSS/JS 庫
本文將介紹如何在 Vue 中使用它們恳邀。
什么是 <transition>
元素?
transition
元素是一個內(nèi)置組件包裝器灶轰,可以幫助您向元素添加過渡功能谣沸。本質(zhì)上,它設(shè)置了不同的鉤子笋颤,并向不斷變化的元素添加類乳附,以便我們可以在過渡的不同階段對它們進行樣式設(shè)置。
有 6 個不同的過渡類(3 個用于進入,3 個用于離開)许溅。
-
v-enter-from
/v-leave-from
:過渡的開始狀態(tài)瓤鼻;過渡開始后將其刪除(在 Vue2 中,它們是v-enter
和v-leave
) -
v-enter-active
/v-leave-active
:過渡的活動狀態(tài) -
v-enter-to
/v-leave-to
:過渡的結(jié)束狀態(tài)
注意:給
transition
添加name
屬性時贤重,類的格式是{name}-enter-from
茬祷,{name}-enter-active
,依此類推并蝗。
我們來看一個簡單的示例祭犯。
Vue 過渡示例
使用 <transition>
內(nèi)置組件包裹需要過渡的元素,并將 name
屬性值設(shè)置為已定義好的類 :
<template>
<h1>Vue 過渡動畫</h1>
<button @click="open = !open">切換動畫</button>
<transition name="fade">
<p v-if="open" class="example-div">Hello Vue</p>
</transition>
</template>
<script setup>
import { ref } from 'vue'
const open = ref(true)
</script>
添加過渡樣式:
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
注意這些類前面的 fade
前綴滚停,它是我們在 transition
標簽上使用 name
屬性的值沃粗。
以上示例中,當過渡處于活動狀態(tài)時键畴,向 opacity
屬性添加過渡最盅,使其平滑移動。
自定義類名和 JS 鉤子
我們還可以通過將以下 6 個屬性中的任何一個添加到我們的 <transition>
元素中來覆蓋這些默認類的任何一個:
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class
這在將自定義庫添加到代碼中時起惕,這特別有用涡贱,例如 Animate.css,后面我們會介紹惹想。
<transition
enter-active-class="animate__animated animate__fadeIn animate__zoomIn"
leave-active-class="animate__animated animate__fadeOut animate__zoomOut"
>
...
</transition>
另外问词, transition
元素還會觸發(fā) JS 鉤子,因此我們可以捕獲它們嘀粱,并使用 JavaScript(而不是 CSS)執(zhí)行動畫激挪。可用的鉤子是:
before-enter / before-leave
enter / leave
after-enter / after-leave
enter-cancelled / leave-cancelled
<transition @before-enter='beforeEnter'>...</transition>
然后锋叨,我們可以在 JavaScript 中處理它們垄分。
// done 是一個可選的回調(diào)方法
beforeEnter(el, done) {
done()
}
使用 Vue 過渡大高級用法
讓您的組件在加載時進行過渡
我們只需將 appear
屬性添加到您的過渡元素中。
<transition name="fade" appear>...</transition>
在多個元素之間過渡
假設(shè)您有兩個像這樣彼此交替的 div
悲柱。
<transition name="fade" appear>
<div v-if="visible">
Option A
</div>
<div v-else>
Option B
</div>
</transition>
你所要做的就是把它們包裝在一個過渡元素中锋喜。要使代碼按您想要的方式運行,需要注意以下幾點:
-
絕對定位元素 — 當 Vue 在這兩個元素之間轉(zhuǎn)換時豌鸡,有時兩個元素都是可見的嘿般,并轉(zhuǎn)換為
in/out
。如果你想要一個平滑的效果涯冠,您可能希望將它們絕對放置在彼此之上炉奴。否則,當元素從 DOM 中添加/刪除時蛇更,它們可能只是到處跳躍瞻赶。 -
如果元素具有相同的標簽赛糟,則必須向組件添加
key
屬性 如果您的元素具有相同的標簽,Vue 將嘗試優(yōu)化內(nèi)容砸逊,只替換元素的內(nèi)容璧南。根據(jù)文檔,如果在多個元素之間轉(zhuǎn)換师逸,最好添加一個鍵司倚。
自定義過渡時間
Vue 通常可以檢測到您的過渡/動畫結(jié)束的時間篓像,但是如果您想設(shè)置確切的持續(xù)時間动知,Vue 過渡有一個 duration
屬性。
您既可以為 enter
和 leave
過渡都傳遞一個值员辩,也可以傳遞具有兩個值的對象盒粮。
<transition :duration="500">...</transition>
<transition :duration="{ enter: 1000, leave: 200 }">...</transition>
動態(tài)組件之間的過渡
您只需要將 Vue 動態(tài)組件包裝在 transition
元素中。
<transition name="fade" appear>
<component :is='componentType' />
</transition>
創(chuàng)建可重用的 Vue 過渡組件
在 Vue 中工作時要養(yǎng)成的一個好習(xí)慣是嘗試設(shè)計可重用的組件奠滑。
我們只需要將 transition
元素放在根中并插入組件插槽丹皱,以便我們可以添加更多內(nèi)容。
<template>
<transition name="fade" appear>
<slot></slot>
</transition>
</template>
現(xiàn)在宋税,您不必擔(dān)心將過渡樣式种呐、名稱和所有內(nèi)容添加到每個組件中,而只需使用此組件即可弃甥。
第三方庫
為了方便使用 Vue 過渡效果,我們可以使用第三方動畫庫汁讼,例如:Animate.css淆攻。
安裝
使用 CDN
<link
rel="stylesheet"
/>
使用 npm
$ npm i animate.css
導(dǎo)入
// main.js
import 'animate.css'
現(xiàn)在,在 transition
元素中嘿架,我們可以使用 enter-active-class
和 leave-active-class
屬性瓶珊,將 animate.js
動畫類添加到我們的元素上。
<transition
enter-active-class="animate__animated animate__fadeIn animate__zoomIn"
leave-active-class="animate__animated animate__fadeOut animate__zoomOut"
>
...
</transition>
注意:對于
animate.js
耸彪,我們需要添加動畫類animate__animated
伞芹。
它提供了許多動畫類,詳細查看官網(wǎng)蝉娜。