Vue3中的transition元件：實現元件過渡效果-Vue.js-PHP中文網

Vue3中的transition元件：實現元件過渡效果

PHPz

發布： 2023-06-18 08:31:39

原創

2315 人瀏覽過

Vue3中的transition元件：實現元件過渡效果

Vue3是最近推出的全新版本，它在效能和開發體驗上做了很多的改進。同時，Vue3也提供了更多的功能和功能，其中一個重要的功能就是transition組件。在Vue3中，transition元件可以用來實現元件的過渡效果，從而使得UI更加豐富和生動。

什麼是transition元件？

在Vue3中，transition元件是一個非常有用的元件，它可以用來為元件添加過渡效果。通俗地說，就是在組件的出現和消失的時候，會有一些動畫效果。這個動畫效果可以是淡入淡出、放大縮小等等，非常實用。

使用transition元件來實現過渡效果

要使用transition元件來實現元件過渡效果，我們需要先掌握一些基本的知識點。首先是transition元件的基礎使用方法。下面就是一個基本使用方法的程式碼範例：

<template>
    <transition name="fade">
        <div v-if="show">我是一个div组件</div>
    </transition>
    
    <button @click="toggleShow">切换组件</button>
</template>

<script>
export default {
    data() {
        return {
            show: true
        };
    },
    
    methods: {
        toggleShow() {
            this.show = !this.show;
        }
    }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}
.fade-enter,
.fade-leave-to{
    opacity:0;
}
</style>

登入後複製

在上面的程式碼中，我們先定義了一個transition元件，然後在transition元件中定義了一個div元件。這個div元件只有當show為true的時候才會顯示。以下是程式碼的解釋：

在transition標籤上定義了一個名為「fade」的屬性，這個屬性表示在動畫過程中，會在CSS類別名稱前面加上「fade- ”前綴。 CSS類別名稱的詳細說明會在後面講到。
在v-if中判斷show的值，如果為true則顯示，false則隱藏。
在樣式中，我們定義了類別名為“fade-enter”，“fade-leave-to”，“fade-enter-active”，和“fade-leave-active”。這些類別名稱都是由我們在屬性中定義的名字「fade」加上前綴組成的。
當元件從隱藏變成顯示時，Vue會自動為元件新增類別名稱“fade-enter”，這時我們可以透過CSS設定元件的初始狀態。同理，當元件從顯示變成隱藏時，Vue會自動為元件加上類別名稱“fade-leave-to”，這時我們可以透過CSS設定元件的最終狀態。
在「fade-enter-active」和「fade-leave-active」中設定CSS的transition屬性，它表示動畫的持續時間。這裡我們設定為0.5秒。
透過上面的步驟，我們成功地為div元件添加了一個淡入淡出的過渡效果。

transition元件的CSS類別名稱

上面的程式碼中我們用到了類別名稱為“fade-enter”，“fade-leave-to”，“fade-enter- active”，和“fade-leave-active”。這些類別名稱是transition元件內建的，但我們需要根據transition的name屬性來設定它們的前綴。當Vue偵測到一個元素的進入或離開時，會依序加入以下類別名稱：