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 の場合にのみ表示されます。コードの説明は以下のとおりです:
トランジション コンポーネントの CSS クラス名
上記のコードでは、クラス名「fade-enter」、「fade-leave-to」、「fade-enter-active」を使用しました。 "、および"fade-leave-active"。これらのクラス名はトランジション コンポーネントに組み込まれていますが、トランジションの name 属性に従ってプレフィックスを設定する必要があります。 Vue が要素の入口または出口を検出すると、次のクラス名を順番に追加します:
これらのクラス名に基づいて、コンポーネントのトランジション効果の初期状態、中間状態、および最終状態を定義できます。
概要
Vue3 では、トランジション コンポーネントは、コンポーネントのトランジション効果を実現するために使用される基本コンポーネントであり、コンポーネントに豊富な視覚効果を追加できるため、ユーザーのインタラクティブ エクスペリエンスが向上します。トランジションコンポーネントを使用する場合、実際のプロジェクトで活用できるように、基本的な使用方法と関連する CSS クラス名をまずマスターする必要があります。
以上がVue3のトランジションコンポーネント:コンポーネントトランジション効果の実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。