Vue3のトランジションコンポーネント：コンポーネントトランジション効果の実現

Vue3 のトランジション コンポーネント: コンポーネントのトランジション エフェクトの実装

Vue3 は最近リリースされた新しいバージョンで、パフォーマンスと開発エクスペリエンスが大幅に向上しています。同時に、Vue3 はより多くの機能も提供します。重要な機能の 1 つはトランジション コンポーネントです。 Vue3 では、トランジション コンポーネントを使用してコンポーネントのトランジション効果を実装できるため、UI がよりリッチで鮮やかになります。

トランジションコンポーネントとは何ですか?

Vue3 では、トランジション コンポーネントはコンポーネントにトランジション効果を追加するために使用できる非常に便利なコンポーネントです。平たく言えば、コンポーネントが表示されたり消えたりするときに、アニメーション効果が発生します。このアニメーション効果はフェードイン、フェードアウト、ズームイン、ズームアウトなどが可能で非常に実用的です。

トランジション コンポーネントを使用してトランジション効果を実現する

トランジション コンポーネントを使用してコンポーネントのトランジション効果を実現するには、まずいくつかの基本的な知識ポイントを習得する必要があります。 1 つ目は、遷移コンポーネントの基本的な使用法です。以下は、基本的な使用法のコード例です。

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

上記のコードでは、最初に遷移コンポーネントを定義し、次に遷移コンポーネント内に div コンポーネントを定義します。この div コンポーネントは、show が true の場合にのみ表示されます。コードの説明は以下のとおりです:

• トランジションタグに「fade」という属性が定義されており、アニメーション処理中に先頭に「fade-」が付加されることを示します。 CSS クラス名。" という接頭辞。 CSS クラス名の詳細については後述します。
• show の値を v-if で判定し、true の場合は表示、false の場合は非表示になります。
• スタイルでは、「fade-enter」、「fade-leave-to」、「fade-enter-active」、「fade-leave-active」という名前のクラスを定義します。これらのクラス名は、属性で定義した名前「fade」と接頭辞で構成されます。
• コンポーネントが非表示から表示に変更されると、Vue は自動的にクラス名「fade-enter」をコンポーネントに追加しますが、このとき、CSS を通じてコン​​ポーネントの初期状態を設定できます。同様に、コンポーネントが表示から非表示に変更されると、Vue はコンポーネントに「fade-leave-to」というクラス名を自動的に追加しますが、このときコンポーネントの最終状態を CSS で設定できます。
• アニメーションの継続時間を表す CSS トランジション プロパティを「fade-enter-active」と「fade-leave-active」に設定します。ここでは 0.5 秒に設定します。
• 上記の手順により、フェードインおよびフェードアウトのトランジション効果を div コンポーネントに追加することができました。

トランジション コンポーネントの CSS クラス名

上記のコードでは、クラス名「fade-enter」、「fade-leave-to」、「fade-enter-active」を使用しました。 "、および"fade-leave-active"。これらのクラス名はトランジション コンポーネントに組み込まれていますが、トランジションの name 属性に従ってプレフィックスを設定する必要があります。 Vue が要素の入口または出口を検出すると、次のクラス名を順番に追加します:

• [name]-enter: 入口の開始状態。このクラス名は、DOM に追加されるとすぐに要素に追加されます。
• [名前]-enter-active: 遷移状態に入ります。このクラス名は、状態に入った直後の要素に追加されます。
• [名前]-enter-to: エントリの終了状態。このクラス名は、エントリ状態の最後に要素に追加されます。
• [名前]-leave: 離脱の開始状態。このクラス名は、要素が DOM から出るとすぐに要素に追加されます。
• [名前]-leave-active: 遷移状態を終了します。このクラス名は、終了状態が終了した直後に要素に追加されます。
• [名前]-leave-to: 退出の終了ステータス。このクラス名は、離脱状態の終了時に要素に追加されます。

これらのクラス名に基づいて、コンポーネントのトランジション効果の初期状態、中間状態、および最終状態を定義できます。

概要

Vue3 では、トランジション コンポーネントは、コンポーネントのトランジション効果を実現するために使用される基本コンポーネントであり、コンポーネントに豊富な視覚効果を追加できるため、ユーザーのインタラクティブ エクスペリエンスが向上します。トランジションコンポーネントを使用する場合、実際のプロジェクトで活用できるように、基本的な使用方法と関連する CSS クラス名をまずマスターする必要があります。

以上がVue3のトランジションコンポーネント：コンポーネントトランジション効果の実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。