Vue中實現過渡動畫效果示例代碼

Posted on by

Vue的transition動畫

Transition動畫的使用

在開發中，我們想要給一個組件的顯示和消失添加某種過渡動畫，可以很好的增加用戶體驗：

React框架本身並沒有提供任何動畫相關的API，所以在React中使用過渡動畫我們需要使用一個第三方庫 react-transition-group；

Vue中為我們提供一些內置組件和對應的API來完成動畫，利用它們我們可以方便的實現過渡動畫效果；

我們來看一個案例：

Hello World的顯示和隱藏；

通過下面的代碼實現，顯式和隱藏Hello World是不會有任何動畫效果的；

<template>
  <div class="app">
    <button @click="btnClick">Toogle</button>
    <h2 v-show="isShow">Hello World</h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isShow = ref(true)
const btnClick = () => {
  isShow.value = !isShow.value
}
</script>

沒有動畫的情況下，整個內容的顯示和隱藏會非常的生硬：

如果我們希望給單元素或者組件實現過渡動畫，可以使用Vue提供的 transition 內置組件來完成動畫；

Vue 提供瞭 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡：

條件渲染 (使用 v-if)條件展示 (使用 v-show)

動態組件

組件根節點

例如我們給剛剛的Hello World添加動畫, 首先定義類(類的名字暫時是固定的)

/* 從什麼狀態進入 */
.v-enter-from {
  opacity: 0;
}

/* 進入之後打算變成的狀態 */
.v-enter-to {
  opacity: 1;
}

/* 進入的過程中做什麼 */
.v-enter-active {
  transition: opacity 2s linear;
}

定義好類之後, 我們可以使用Vue的內置組件 transition 將動畫元素包裹起來, transition 組件會自動在合適的時機, 將合適的類添加到它所包裹的元素上

<template>
  <div class="app">
    <button @click="btnClick">Toogle</button>
    <!-- 使用內置組件包裹h2 -->
    <transition>
      <h2 v-show="isShow">Hello World</h2>
    </transition>
  </div>
</template>

此時顯式Hello World 就已經有動畫效果瞭, 但是隱藏時並沒有效果, 是因為我們剛剛定義的類是進入的類, 當離開時我們也應該定義對應的類

/* 離開後的狀態 */
.v-leave-to,
/* 從什麼狀態進入 */
.v-enter-from {
  opacity: 0;
}

/* 開始離開的狀態 */
.v-leave-from,
/* 進入之後打算變成的狀態 */
.v-enter-to {
  opacity: 1;
}

/* 離開過程中做什麼 */
.v-leave-active,
/* 進入的過程中做什麼 */
.v-enter-active {
  transition: opacity 1s linear;
}

Transition組件的原理

我們會發現，上面演示代碼中Vue自動給h2元素添加瞭動畫，這是什麼原因呢？

當插入或刪除包含在 transition 組件中的元素時， Vue 將會做以下處理：

1.自動嗅探目標元素是否應用瞭CSS過渡或者動畫，如果有，那麼在恰當的時機添加/刪除 CSS類名；

2.如果 transition 組件提供瞭JavaScript鉤子函數，這些鉤子函數將在恰當的時機被調用；

3.如果沒有找到JavaScript鉤子並且也沒有檢測到CSS過渡/動畫， DOM插入、刪除操作將會立即執行；

在上面我們簡單使用瞭Vue會自動添加/刪除的CSS類名, 接下來我們詳細學習一下都有哪些類吧

Transition動畫的class

我們會發現上面提到瞭很多個class，事實上Vue就是幫助我們在這些class之間來回切換完成的動畫：

v-enter-from：定義進入過渡的開始狀態。

在元素被插入之前生效，在元素被插入之後的下一幀移除。

v-enter-active：定義進入過渡生效時的狀態。

在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線 函數。

v-enter-to：定義進入過渡的結束狀態。

在元素被插入之後下一幀生效 (與此同時 v-enter-from 被移除)，在過渡/動畫完成之後移除。

v-leave-from：定義離開過渡的開始狀態。

在離開過渡被觸發時立刻生效，下一幀被移除。

v-leave-active：定義離開過渡生效時的狀態。

在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲 和曲線函數。

v-leave-to：離開過渡的結束狀態。

在離開過渡被觸發之後下一幀生效 (與此同時 v-leave-from 被刪除)，在過渡/動畫完成之後移除。

在這裡插入圖片描述

class的name命名規則如下：

如果我們使用的是一個沒有name屬性的transition，那麼所有的class是以 v- 作為默認前綴；

如果我們添加瞭一個name屬性，比如<transtion name= “abc” >，那麼所有的class會以 abc- 開頭；

Vue的animation動畫

Animation動畫的使用

例如有一段文本, 我們對文本的顯式隱藏添加上一些動畫

先定義類, 用於實現動畫

/* 定義進入的動畫 */
.v-enter-active {
  animation: myAnim 2s linear;
}

/* 定義離開的動畫 */
.v-leave-active {
  animation: myAnim 2s linear reverse;
}

/* 定義序列幀動畫 */
@keyframes myAnim {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.25);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

同transition動畫, 使用transition組件包裹

<template>
  <div class="app">
    <button @click="btnClick">Toogle</button>
    <!-- 使用內置組件包裹h2 -->
    <transition>
      <h2 v-show="isShow">
        今天2022年8月6日星期六，利好消息來襲！因為經濟數據仍顯疲軟，
        市場對全球經濟增速放緩可能抑制需求的擔憂加劇，導致成品油調價
        掛靠的國際油價繼續下挫，同時綜合原油品種變化率也已經完成正值
        到負值的轉變。數據顯示：截至國內成品油調價周期的第8個工作日
        結束，原油綜合變化率為-0.83%，詳細成品油調價窗口開啟時間定在
        8月9日24時開啟。
      </h2>
    </transition>
  </div>
</template>

同時設置兩種動畫(瞭解)

Vue為瞭知道過渡的完成，內部是在監聽 transitionend 或 animationend，到底使用哪一個取決於元素應用的CSS規則：

如果我們隻是使用瞭其中的一個，那麼Vue能自動識別類型並設置監聽；

但是如果我們同時使用瞭transition動畫和animation動畫呢？

在開發中, 如果設置瞭兩個動畫, 盡量要保持兩個動畫的時間一致；

/* 定義transition動畫 */
.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-enter-to,
.v-leave-from {
  opacity: 1;
}


.v-enter-active {
  /* 設置兩個不同的動畫, 最好保持動畫時間一致 */
  animation: myAnim 2s linear;
  transition: opacity 2s linear;
}

.v-leave-active {
  /* 設置兩個不同的動畫, 最好保持動畫時間一致 */
  animation: myAnim 2s linear reverse;
  transition: opacity 2s linear;
}

/* 定義序列幀動畫 */
@keyframes myAnim {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.25);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

如果使用兩個動畫, 動畫的時間又不一致, 並且在這個情況下可能某一個動畫執行結束時，另外一個動畫還沒有結

在這種情況下，我們可以設置 type 屬性為 animation 或者 transition 來明確的告知Vue監聽的類型, 以哪一個動畫為標準(一般不設置)；

<!-- 告知以哪一個動畫為標準 -->
<transition type="transition">
  <h2 v-show="isShow">
    今天2022年8月6日星期六，利好消息來襲！因為經濟數據仍顯疲軟，
    市場對全球經濟增速放緩可能抑制需求的擔憂加劇，導致成品油調價
    掛靠的國際油價繼續下挫，同時綜合原油品種變化率也已經完成正值
    到負值的轉變。數據顯示：截至國內成品油調價周期的第8個工作日
    結束，原油綜合變化率為-0.83%，詳細成品油調價窗口開啟時間定在
    8月9日24時開啟。
  </h2>
</transition>

過渡的模式mode

我們來看當前的動畫在兩個元素之間顯式隱藏切換的時候添加動畫存在的問題：

在這裡插入圖片描述

我們會發現 Hello World 和 你好啊，李銀河是同時存在的：

這是因為默認情況下進入和離開動畫是同時發生的；

如果確實我們希望達到這個的效果，那麼是沒有問題；

但是如果我們不希望同時執行進入和離開動畫，那麼我們需要設置transition的過渡模式：

in-out: 新元素先進行過渡，完成之後當前元素過渡離開；

out-in: 當前元素先進行過渡，完成之後新元素過渡進入；

<transition mode="in-out">
  <h2>Hello Worl</h2>
  <h2>你好啊, 李銀河</h2>
</transition>

上面的示例同樣適用於我們的動態組件：

<div class="app">
  <div>
    <button @click="isShow = !isShow">切換</button>
  </div>

  <transition name="why" mode="out-in">
    <component :is=" isShow ? 'home': 'about'"></component>
  </transition>
</div>

默認情況下，首次渲染的時候是沒有動畫的，如果我們希望給他添加上去動畫，那麼就可以增加另外一個屬性appear：

<div class="app">
  <div>
    <button @click="isShow = !isShow">切換</button>
  </div>

  <transition name="why" mode="out-in" appear="">
    <component :is=" isShow ? 'home': 'about'"></component>
  </transition>
</div>

列表過渡

列表過渡的介紹

目前為止，過渡動畫我們隻要是針對單個元素或者組件的：

要麼是單個節點；

要麼是同一時間渲染多個節點中的一個；

那麼如果希望渲染的是一個列表，並且該列表中添加刪除數據也希望有動畫執行呢？

這個時候我們要使用<transition-group>組件來完成；

使用<transition-group>有如下的特點：

默認情況下，它不會渲染成任何一個元素，但是你可以指定一個元素並以 tag attribute 讓他進行渲染；

過渡模式不可用，因為我們不再相互切換特有的元素；

內部元素總是需要提供唯一的 key attribute 值；

CSS 過渡的類將會應用在內部的元素中，而不是這個組/容器本身；

列表過渡的使用

我們來做一個案例：

案例是一列數字，可以繼續添加或者刪除數字；

在添加和刪除數字的過程中，對添加的或者移除的數字添加動畫；

示例代碼如下

<template>
  <div class="app">
    <button @click="addNumber">添加數字</button>
    <button @click="removeNumber">刪除數字</button>
    
    <template v-for="item in nums" :key="item">
      <span>{{ item }}</span>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const nums = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])

const addNumber = () => {
  nums.value.splice(randomIndex(), 0, nums.value.length)
}

const removeNumber = () => {
  nums.value.splice(randomIndex(), 1)
}

const randomIndex = () => {
  return Math.floor(Math.random() * nums.value.length)
}

</script>

添加動畫, 此時添加上動畫, 這個組中的內容都會有動畫效果

span {
  margin-right: 20px;
  display: inline-block;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.v-enter-to,
.v-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.v-enter-active,
.v-leave-active {
  transition: all 2s linear;
}

<template>
  <div class="app">
    <button @click="addNumber">添加數字</button>
    <button @click="removeNumber">刪除數字</button>
    
    <!-- tag屬性, 告知渲染成div -->
    <transition-group tag="div">
      <template v-for="item in nums" :key="item">
        <span>{{ item }}</span>
      </template>
    </transition-group>
  </div>
</template>

在上面的案例中雖然新增的或者刪除的節點是有動畫的，但是對於哪些其他需要移動的節點是沒有動畫的：

我們可以通過使用一個新增的 v-move 的class來完成動畫；

它會在元素改變位置的過程中應用；

像之前的名字一樣，我們也可以通過name來自定義前綴；

/* 定位解決刪除占用空間, 無法執行動畫問題 */
.v-leave-active {
  position: absolute;
}
  /* 針對其他節點移動需要的動畫 */
.v-move {
  transition: all 2s linear;
}

到此這篇關於Vue中實現過渡動畫效果示例代碼的文章就介紹到這瞭,更多相關Vue中實現過渡動畫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：