寫(xiě)在前面

在實(shí)際開(kāi)發(fā)中，為了增加用戶體驗(yàn)，經(jīng)常會(huì)使用到過(guò)渡動(dòng)畫(huà)，而過(guò)渡動(dòng)畫(huà)在CSS中是通過(guò)transition和animation實(shí)現(xiàn)的。而在Vue中，Vue本身中內(nèi)置了一些組件和API可以幫助我們方便的實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果；接下來(lái)我們就學(xué)習(xí)一下。

Vue的transition組件

Vue中中提供了transition組件，該組件可以在下列情況之一的情況下，為元素自動(dòng)添加進(jìn)入/離開(kāi)的過(guò)渡效果：

• 使用v-if條件渲染
• 使用v-show條件展示
• 動(dòng)態(tài)組件
• 組件根節(jié)點(diǎn)

使用方式也比較簡(jiǎn)單，需要將需要?jiǎng)赢?huà)展示的組件或者元素使用<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)畫(huà)演示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)入之前和離開(kāi)后的樣式 */
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
/* 離開(kāi)和進(jìn)入過(guò)程中的樣式 */
.v-enter-active,
.v-leave-active {
  /* 添加過(guò)渡動(dòng)畫(huà) */
  transition: opacity 0.5s ease;
}
/* 進(jìn)入之后和離開(kāi)之前的樣式 */
.v-enter-to,
.v-leave-from {
  opacity: 1;
}
</style>

代碼的運(yùn)行結(jié)果如下圖所示：

上面使用的一些class，他們的含義如下所示：

• v-enter-from：定義進(jìn)入過(guò)渡的開(kāi)始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。
• v-enter-active：定義進(jìn)入過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過(guò)渡的階段中應(yīng)用，在元素被插入之前生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義進(jìn)入過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
• v-enter-to：定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter-from 被移除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。
• v-leave-from：定義離開(kāi)過(guò)渡的開(kāi)始狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，下一幀被移除。
• v-leave-active：定義離開(kāi)過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)離開(kāi)過(guò)渡的階段中應(yīng)用，在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義離開(kāi)過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
• v-leave-to：離開(kāi)過(guò)渡的結(jié)束狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave-from 被移除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。

下圖是Vue文檔中的一張圖，完美解釋了整個(gè)流程

class的命名規(guī)則

<transition>組件的class名稱(chēng)并不是必須以v-作為前綴的，其實(shí)我們可以自定義前綴，只需要添加一個(gè)name屬性，例如<transition name="ywz">，那么所有的前綴全部變成了ywz-。

使用animation

前面我們使用了transition屬性實(shí)現(xiàn)了組件進(jìn)入和離開(kāi)的過(guò)渡效果，現(xiàn)在我們可以使用animation屬性實(shí)現(xiàn)，示例代碼如下：

<transition>
  <hello-world v-if="helloWorldShow" msg="【一碗周】過(guò)渡動(dòng)畫(huà)演示demo" />
</transition>

css

/* 離開(kāi)和進(jìn)入過(guò)程中的樣式 */
.v-enter-active,
.v-leave-active {
  /* 添加過(guò)渡動(dòng)畫(huà) */
  transition: opacity 0.5s ease;
}

代碼運(yùn)行結(jié)果如下：

過(guò)渡模式

先看一個(gè)問(wèn)題，當(dāng)動(dòng)畫(huà)在兩個(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)畫(huà)演示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ò)渡離開(kāi)。
• out-in：當(dāng)前元素先進(jìn)行離開(kāi)過(guò)渡，完成之后新元素過(guò)渡進(jìn)入。

了解這個(gè)屬性之后，我們將代碼修改一下，修改后如下：

<transition mode="out-in">
  <hello-world v-if="show" msg="【一碗周】過(guò)渡動(dòng)畫(huà)演示demo" />
  <img v-else alt="Vue logo" src="./assets/logo.png" />
</transition>

現(xiàn)在的運(yùn)行結(jié)果如下：

appear屬性

<transition>組件的appear屬性用于開(kāi)啟首次渲染的動(dòng)畫(huà)，它接受一個(gè)布爾值，示例代碼如下：

<transition mode="out-in" appear>
  <img v-if="show" alt="Vue logo" src="./assets/logo.png" />
</transition>

animate.css庫(kù)的使用

如果我們?cè)趯?shí)際的開(kāi)發(fā)中自己去一個(gè)一個(gè)的編寫(xiě)這些動(dòng)畫(huà)序列，那么效率是比較低下的，所以我們經(jīng)常會(huì)用到一些動(dòng)畫(huà)庫(kù)，最常見(jiàn)的就是animate.css。

現(xiàn)在我們就來(lái)看那一下如何在Vue中使用animate.css：

• 安裝animate.css

npm i animate.css

• 引入animate.css

// main.js
import 'animate.css'

使用動(dòng)畫(huà)序列

.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ì)高于普通的類(lèi)名。

<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>

寫(xiě)在最后

本篇文章介紹了過(guò)渡的基本使用，掌握Vue提供的<transition>組件配合animate.css可以輕松實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)。

除了單個(gè)組件的過(guò)渡外，Vue還提供了TransitionGroup組件，用于實(shí)現(xiàn)多個(gè)組件的過(guò)渡動(dòng)畫(huà)，我們以后介紹。

到此這篇關(guān)于十分鐘帶你快速上手Vue3過(guò)渡動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)Vue3過(guò)渡動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論