Vue 過渡和動畫

本文已整理到 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-enterv-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 屬性。

您既可以為 enterleave 過渡都傳遞一個值员辩,也可以傳遞具有兩個值的對象盒粮。

<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-classleave-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)蝉娜。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末唱较,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子召川,更是在濱河造成了極大的恐慌南缓,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荧呐,死亡現(xiàn)場離奇詭異汉形,居然都是意外死亡纸镊,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門概疆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來逗威,“玉大人,你說我怎么就攤上這事岔冀】瘢” “怎么了?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵楣颠,是天一觀的道長尽纽。 經(jīng)常有香客問我,道長童漩,這世上最難降的妖魔是什么弄贿? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮矫膨,結(jié)果婚禮上差凹,老公的妹妹穿的比我還像新娘。我一直安慰自己侧馅,他們只是感情好危尿,可當我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著馁痴,像睡著了一般谊娇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上罗晕,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天济欢,我揣著相機與錄音,去河邊找鬼小渊。 笑死法褥,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的酬屉。 我是一名探鬼主播半等,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼呐萨!你這毒婦竟也來了杀饵?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤垛吗,失蹤者是張志新(化名)和其女友劉穎凹髓,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體怯屉,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡蔚舀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年饵沧,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赌躺。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡狼牺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出礼患,到底是詐尸還是另有隱情是钥,我是刑警寧澤,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布缅叠,位于F島的核電站悄泥,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏肤粱。R本人自食惡果不足惜弹囚,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望领曼。 院中可真熱鬧鸥鹉,春花似錦、人聲如沸庶骄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽单刁。三九已至灸异,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間羔飞,已是汗流浹背绎狭。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留褥傍,地道東北人。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓喇聊,卻偏偏與公主長得像恍风,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子誓篱,可洞房花燭夜當晚...
    茶點故事閱讀 43,728評論 2 351