快捷導(dǎo)航

vue內(nèi)置組件Transition的示例詳解

更新時(shí)間：2023年09月21日 11:03:13 作者：周周愛喝粥呀

這篇文章主要介紹了vue內(nèi)置組件Transition的詳解,簡單地說，就是當(dāng)元素發(fā)生變化，比如消失、顯示時(shí)，添加動(dòng)畫讓它更自然過渡，它是vue內(nèi)置組件，不需要引入注冊就可以直接使用，本文通過實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下

1. Transition定義

Vue 提供了兩個(gè)內(nèi)置組件，可以幫助你制作基于狀態(tài)變化的過渡和動(dòng)畫： <Transition> 會(huì)在一個(gè)元素或組件進(jìn)入和離開 DOM 時(shí)應(yīng)用動(dòng)畫。 <TransitionGroup> 會(huì)在一個(gè) v-for 列表中的元素或組件被插入，移動(dòng)，或移除時(shí)應(yīng)用動(dòng)畫。

簡單地說，就是當(dāng)元素發(fā)生變化，比如消失、顯示時(shí)，添加動(dòng)畫讓它更自然過渡。它是vue內(nèi)置組件，不需要引入注冊就可以直接使用。

在什么情況會(huì)出現(xiàn)過渡？

1. v-if 切換

2. v-show 切換

3. 動(dòng)態(tài)組件 component 切換

4. 改變特殊的 key 屬性

前幾個(gè)比較好理解，最后一個(gè)用到了 key 值變化導(dǎo)致元素強(qiáng)制更新。下面例子的key值變化，vue會(huì)認(rèn)為這里產(chǎn)生了一個(gè)新元素，之前的會(huì)被刪除，從而導(dǎo)致過渡。

<script setup>
import { ref } from 'vue'
const keyValue = ref(1)
</script>
<template>
  <button @click="() =>keyValue = Math.random()">Toggle</button>
  <Transition >
    <p :key="keyValue">hello</p>
  </Transition>
</template>
<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

2. 添加過渡效果

如果不給命名的話，添加動(dòng)畫效果的默認(rèn)類名前綴是 v-

v-enter-active ：進(jìn)入動(dòng)畫的生效狀態(tài)

v-leave-active ：離開動(dòng)畫的生效狀態(tài)

v-enter-from ：剛進(jìn)入動(dòng)畫的開始狀態(tài)

v-leave-to ：離開動(dòng)畫時(shí)的結(jié)束狀態(tài)

v-enter-to ：剛進(jìn)入動(dòng)畫的結(jié)束狀態(tài)

v-leave-from ：離開動(dòng)畫的結(jié)開始態(tài)一般前4種用得比較多，兩個(gè)生效狀態(tài)，加上進(jìn)入動(dòng)畫的開始狀態(tài)和離開動(dòng)畫時(shí)的結(jié)束狀態(tài)。

3. 自定義過渡類名

通過 name 可以自定義 <Transition> 的過渡類名。

<Transition name="a">
  ...
</Transition>

.a-enter-active,
.a-leave-active {
  transition: opacity 0.5s ease;
}
.a-enter-from,
.a-leave-to {
  opacity: 0;
}

注意：里面只能有一個(gè)根組件，但使用 v-if、v-else、v-else-if 切換顯示是可以的。如果想對列表中的元素設(shè)置過渡，可以使用 <TransitionGroup >

4. 深層元素的過渡

可以給深層級(jí)的元素設(shè)置過渡效果。

<Transition name="fade">
  <div v-if="show" class="outer">
    <div class="inner">
      Hello
    </div>
  </div>
</Transition>

/* 應(yīng)用于嵌套元素的規(guī)則 */
.fade-enter-active .inner,
.fade-leave-active .inner {
  transition: all 0.3s ease-in-out;
}
.fade-enter-from .inner,
.fade-leave-to .inner {
  transform: translateX(30px);
  opacity: 0;
}

duration 屬性設(shè)置過渡持續(xù)的時(shí)間，單位是毫秒。

<Transition :duration="550">...</Transition>

5. 過渡的鉤子函數(shù)

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
...
<<Transition>

6. 封裝過渡效果

<!-- MyTransition.vue -->
<script>
// JavaScript 鉤子邏輯...
</script>
<template>
  <!-- 包裝內(nèi)置的 Transition 組件 -->
  <Transition
    name="my-transition"
    @enter="onEnter"
    @leave="onLeave">
    <slot></slot> <!-- 向內(nèi)傳遞插槽內(nèi)容 -->
  </Transition>
</template>
<style>
</style>

注意：該組件樣式不要添加 scoped , 不然插槽內(nèi)沒有過渡效果。

<MyTransition>
  <div v-if="show">Hello</div>
</MyTransition>

7. 過渡模式

可以設(shè)置屬性 mode 為 out-in 或 in-out in-out 表示當(dāng)前元素先進(jìn)行過渡，完成之后新元素過渡進(jìn)入。通常我們更多的會(huì)使用out-in，讓當(dāng)前元素先離開，然后再進(jìn)行新元素的進(jìn)入。

到此這篇關(guān)于vue內(nèi)置組件Transition的詳解的文章就介紹到這了,更多相關(guān)vue內(nèi)置組件Transition內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: