Vue を使用して CSS トランジションとアニメーションを実装する方法

1. 移行の基本的な紹介
2. 遷移の遷移クラス
3. 遷移の例
4. アニメーションの例
5. 遷移のname属性
6. 遷移クラス名をカスタマイズする
7. トランジションとアニメーションを同時に設定する
8. 持続時間プロパティ
9. jsを使用してアニメーションを実装する

4. コンポーネントと要素の切り替えアニメーションの実装

5. リストアニメーション

6. 状態アニメーション

要約する

1. トランジションとアニメーションの違い

遷移: 通常、要素の属性の状態の変化を示すために使用されます。

アニメーション: 通常、要素の動きを示すために使用されます。

2. Vueを使用して基本的なCSSトランジションとアニメーションを実装する

1. アニメーション

/* css */
@keyframes 左から右へ {
    0% {
        変換: translateX(-100px);
    }
    50% {
        変換: translateX(-50px);
    }
    100% {
        変換: translateX(0);
    }
}
.アニメーション{
    アニメーション: 左から右へ 3秒;
}

// js
const app = Vue.createApp({
    データ（） {
        戻る {
            アニメーション:
                アニメーション: true
            }
        }
    },
    メソッド: {
        ハンドルクリック(){
            this.animate.animation = !this.animate.animation
        }
    },
    テンプレート: `
        <div :class='animate'>こんにちは</div>
        <button @click='handleClick'>スイッチ</button>
    `
});

2. 移行

/* css */
。遷移 {
    遷移: 背景色 3s 線形 0s;
}
 
。金 {
    背景色: ゴールド;
}
 
.シアン{
    背景色: シアン;
}

// js
const app = Vue.createApp({
    データ（） {
        戻る {
            アニメーション:
                遷移: true、
                ゴールド：本当です、
                シアン: 偽
            }
        }
    },
    メソッド: {
        ハンドルクリック() {
            this.animate.gold = !this.animate.gold;
            this.animate.cyan = !this.animate.cyan;
        }
    },
    テンプレート: `
        <div :class='animate'>こんにちは</div>
        <button @click='handleClick'>スイッチ</button>
    `
});

上記は、class 属性を設定することで実現されますが、style 属性を設定することでも実現できます。

/* css */
。遷移 {
    遷移: 背景色 3s 線形 0s;
}

// js
データ（） {
    戻る {
        遷移: '遷移',
        スタイルオブジェクト: {
            背景色: 'ゴールド'
        }
    }
},
メソッド: {
    ハンドルクリック() {
        if(this.styleObject.backgroundColor === 'ゴールド'){
            this.styleObject.backgroundColor = 'シアン';
        }それ以外{
            this.styleObject.backgroundColor = 'ゴールド';
        }
    }
},
テンプレート: `
    <div :class='transition' :style='styleObject'>こんにちは</div>
    <button @click='handleClick'>スイッチ</button>
`

3. トランジションタグを使用して、単一の要素/コンポーネントのトランジションとアニメーション効果を実現します。

1. 移行の基本的な紹介

<transition> 要素は、単一の要素/コンポーネントの遷移効果として機能します。
<transition> は、追加の DOM 要素をレンダリングしたり、検査可能なコンポーネント階層に表示したりすることなく、ラップされたコンテンツにのみトランジション効果を適用します。

2. 遷移の遷移クラス

開始/終了遷移中は、6 つのクラスが切り替わります。

v-enter-from : Enter 遷移の開始状態を定義します。要素が挿入される前に有効になり、要素が挿入された後の次のフレームで削除されます。
v-enter-active: Enter 遷移が有効なときの状態を定義します。要素が挿入される前のエントリ遷移フェーズ全体に適用され、遷移/アニメーションが完了した後に削除されます。このクラスは、エントリ遷移のタイミング、遅延、および曲線関数を定義するために使用できます。
v-enter-to: エンター遷移の終了状態を定義します。要素が挿入されてから 1 フレーム後に有効になり (同時に v-enter-from が削除され)、遷移/アニメーションが完了すると削除されます。
v-leave-from : 退出遷移の開始状態を定義します。終了遷移がトリガーされるとすぐに有効になり、次のフレームで削除されます。
v-leave-active: 離脱遷移が有効なときの状態を定義します。退出遷移フェーズ全体に適用され、退出遷移がトリガーされるとすぐに有効になり、遷移/アニメーションが完了した後に削除されます。このクラスは、退出遷移の期間、遅延、曲線関数を定義するために使用できます。
v-leave-to: 退出遷移の終了状態。離脱遷移がトリガーされてから 1 フレーム後に有効になり (同時に v-leave-from が削除される)、遷移/アニメーションが完了すると削除されます。

3. 遷移の例

遷移が必要な要素を遷移タグで囲みます。遷移に必要なクラスを設定します。上記の6つのクラスから選択できます。

/* css */
/* .v-enter-from {
    不透明度: 0;
}
.v-enter-active {
    遷移: 不透明度 1 秒の緩和;
}
.v-enter-to {
    不透明度: 1;
}
.v-leave-from {
    不透明度: 1;
}
.v-アクティブ状態を解除{
    遷移: 不透明度 1 秒の緩和;
}
.v-leave-to {
    不透明度: 0;
} */
/* 略語 */
.v-enter-from、.v-leave-to{
    不透明度: 0;
}
.v-enter-active、.v-leave-active{
    遷移: 不透明度 1 秒の緩和;
}

// js
const app = Vue.createApp({
    データ（） {
        戻る {
            表示: 真
        }
    },
    メソッド: {
        ハンドルクリック() {
            this.show = !this.show;
        }
    },
    テンプレート: `
        <遷移>
            <div v-if='show'>こんにちは</div>
        </トランジション>
        <button @click='handleClick'>スイッチ</button>
    `
});

4. アニメーションの例

アニメーション効果を使用するには、CSS 部分を変更するだけで、JS 部分は変更されません。

/* css */
@keyframes シェイクイン {
    0% {
        変換: translateX(-50px);
    }
    50% {
        変換: translateX(50px);
    }
    100% {
        変換: translateX(0px);
    }
}
@keyframes シェイクアウト {
    0% {
        変換: translateX(50px);
    }
    50% {
        変換: translateX(-50px);
    }
    100% {
        変換: translateX(0px);
    }
}
.v-enter-active{
    アニメーション: シェイクイン 1 秒、イーズイン;
}
.v-アクティブから抜ける{
    アニメーション: シェイクアウト 1 秒、イーズインアウト;
}

5. 遷移のname属性

name - 文字列: CSS トランジションクラス名を自動的に生成するために使用されます。指定されていない場合、デフォルト値は v です。
name が hy に設定されている場合、対応するクラス名も hy で始まるように変更する必要があります。

// js
<トランジション名='hy'>
    <div v-if='show'>こんにちは</div>
</トランジション>

/* css */
.hy-enter-from、.hy-leave-to{
    不透明度: 0;
}
.hy-enter-active、.hy-leave-active{
    遷移: 不透明度 1 秒の緩和;
}

6. 遷移クラス名をカスタマイズする

次の属性を使用して遷移クラス名をカスタマイズできます。

クラスから入る
アクティブクラスに入る
クラスに入る
授業を休む
アクティブクラスを離れる
授業を抜け出す

これらは通常のクラス名よりも優先順位が高く、Vue のトランジションシステムをAnimate.css などの他のサードパーティ CSS アニメーションライブラリと組み合わせる場合に便利です。

// まずスタイルシートをインポートします <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="external nofollow" />
 
const app = Vue.createApp({
    データ（） {
        戻る {
            表示: 真
        }
    },
    メソッド: {
        ハンドルクリック() {
            this.show = !this.show;
        }
    },
    // トランジションクラス名をカスタマイズしてアニメーションスタイルテンプレートを追加します: `
        <トランジション名='hy' 
        enter-active-class='animate__animated animate__bounce'
        アクティブクラスを「animate__animated animate__bounce」にします。
            <div v-if='show'>こんにちは</div>
        </トランジション>
        <button @click='handleClick'>スイッチ</button>
    `
});

7. トランジションとアニメーションを同時に設定する

シナリオによっては、同じ要素に対してトランジションとアニメーションを同時に設定する必要があります。たとえば、アニメーションはトリガーされてすぐに完了しますが、トランジション効果はまだ終了していません。
この場合、type 属性を使用してアニメーションまたはトランジションを設定し、Vue がリッスンするタイプを明示的に宣言する必要があります。
タイプ - 文字列。遷移イベントタイプを指定し、遷移が終了するタイミングをリッスンします。有効な値は「transition」と「animation」です。デフォルトでは、Vue.js は長時間のイベントを遷移イベントとして自動的に検出します。

遷移時間が長い場合、type='transiton' を使用した場合の効果は次のようになります。

アニメーションは最初に完了しますが、遷移は終了せず、要素が消える前に完全に実行されることがわかります。

/* css */
@keyframes シェイクイン {
    0% {
        変換: translateX(-50px);
    }
 
    50% {
        変換: translateX(50px);
    }
 
    100% {
        変換: translateX(0px);
    }
}
 
@keyframes シェイクアウト {
    0% {
        変換: translateX(50px);
    }
 
    50% {
        変換: translateX(-50px);
    }
 
    100% {
        変換: translateX(0px);
    }
}
 
.v-enter-from、
.v-leave-to {
    色: 赤;
}
 
.v-enter-active {
    アニメーション: シェイクイン 1 秒、イーズイン;
    トランジション: カラー 3 秒のイーズイン;
}
 
.v-enter-to、.v-leave-from {
    色: 緑;
}
 
.v-アクティブ状態を解除{
    アニメーション: シェイクアウト 1 秒、イーズインアウト;
    トランジション: カラー 3 秒のイーズインアウト;
}

// js
const app = Vue.createApp({
    データ（） {
        戻る {
            表示: 真
        }
    },
    メソッド: {
        ハンドルクリック() {
            this.show = !this.show;
        }
    },
    テンプレート: `
        <トランジションタイプ='トランジション'>
            <div v-if='show'>こんにちは</div>
        </トランジション>
        <button @click='handleClick'>スイッチ</button>
    `
});

遷移時間が長い場合は、type='animation ' を使用します。

アニメーションが完了すると、トランジションがすぐに終了し、要素が消えることがわかります。

<トランジションタイプ='アニメーション'>
    <div v-if='show'>こんにちは</div>
</トランジション>

8. 持続時間プロパティ

期間 - 数値 | { enter: 数値、 leave: 数値 }: 遷移の期間を指定します。
CSS で設定された時間よりも優先度が高くなります。
単位はmsです。

<トランジション:duration='100'>
    <div v-if='show'>こんにちは</div>
</トランジション>

エントリーとエグジットの期間をカスタマイズすることもできます。

<transition :duration='{ enter: 1000, leave: 3000 }' >
    <div v-if='show'>こんにちは</div>
</トランジション>

9. jsを使用してアニメーションを実装する

JavaScript のみで遷移する場合は、enter フックと leave フックで done コールバックを使用する必要があります。それ以外の場合は、同期的に呼び出され、遷移はすぐに完了します。
:css="false" を追加すると、Vue は CSS 検出をスキップします。これにより、パフォーマンスがわずかに向上するだけでなく、遷移プロセス中の CSS ルールの影響を回避できます。

js でアニメーションを実装するには、 transition 属性で JavaScript フックを宣言します。

@before-enter="beforeEnter"	移行前
@enter="入力"	移行に入るとき
@after-enter="afterEnter"	移行期に入った後
@enter-cancelled="enterCancelled"	エントリー遷移が中断された場合
@before-leave="beforeLeave"	移行を終了する前に
@leave="退出"	トランジションを離れるとき
@after-leave="afterLeave"	移行期間終了後
@leave-cancelled="キャンセル済み"	離脱遷移が中断された場合

const app = Vue.createApp({
    データ（） {
        戻る {
            表示: 真
        }
    },
    メソッド: {
        ハンドルクリック() {
            this.show = !this.show;
        },
        ハンドルBeforeEnter(el){
            el.style.color = '赤';
        },
        handleEnter(el, 完了){
            定数タイマー = setInterval(()=>{
                if(el.style.color === '赤'){
                    el.style.color = '青';
                }それ以外{
                    el.style.color = '赤';
                }
            }, 1000);
            タイムアウトを設定します(()=>{
                タイマーの間隔をクリアします。
                // アニメーション終了マーク // done() が実行されない場合、handleAfterEnter は done() を実行しません。
            }, 3000)
        },
        ハンドルAfterEnter(el){
            console.log('成功');
        }
    },
    テンプレート: `
        <トランジション:css='false'
        @before-enter='handleBeforeEnter'
        @enter='ハンドルEnter'
        @after-enter='handleAfterEnter'
        >
            <div v-if='show'>こんにちは</div>
        </トランジション>
        <button @click='handleClick'>スイッチ</button>
    `
});

// js
const app = Vue.createApp({
    コンポーネント: ['item-a', 'item-b'],
    データ（） {
        戻る {
            コンポーネント: 'item-a'
        }
    },
    メソッド: {
        ハンドルクリック() {
            if (this.component === 'item-a') {
                this.component = 'item-b';
            } それ以外 {
                this.component = 'item-a';
            }
        }
    },
    テンプレート: `
        <遷移モード='out-in' が表示されます>
            <コンポーネント:is='コンポーネント' />
        </トランジション>
        <button @click='handleClick'>スイッチ</button>
    `
});
app.component('item-a', {
    テンプレート: `<div>hello</div>`
});
app.component('item-b', {
    テンプレート: `<div>bye</div>`
});

4. コンポーネントと要素の切り替えアニメーションの実装

mode - 文字列退出/入場遷移のタイミングを制御します。
有効なモードは「out-in」と「in-out」です。デフォルトは同時です。
ノードの初期レンダリング遷移は、appear 属性を使用して設定できます。

/* css */
.v-enter-from、
.v-leave-to {
    不透明度: 0;
}
 
.v-enter-active、
.v-アクティブ状態を解除{
    遷移: 不透明度 1 秒のイーズイン;
}
 
.v-enter-to、
.v-leave-from {
    不透明度: 1;
}

// js
const app = Vue.createApp({
    コンポーネント: ['item-a', 'item-b'],
    データ（） {
        戻る {
            コンポーネント: 'item-a'
        }
    },
    メソッド: {
        ハンドルクリック() {
            if (this.component === 'item-a') {
                this.component = 'item-b';
            } それ以外 {
                this.component = 'item-a';
            }
        }
    },
    テンプレート: `
        <遷移モード='out-in' が表示されます>
            <コンポーネント:is='コンポーネント' />
        </トランジション>
        <button @click='handleClick'>スイッチ</button>
    `
});
app.component('item-a', {
    テンプレート: `<div>hello</div>`
});
app.component('item-b', {
    テンプレート: `<div>bye</div>`
});

5. リストアニメーション

<transition-group> コンポーネントを使用すると、リスト全体を同時にレンダリングできます。
内部要素は常に一意のキー属性値を提供する必要があります。
CSS トランジションクラスは、グループ/コンテナー自体ではなく、内部要素に適用されます。
<transition-group> コンポーネントには、もう 1 つの特別な機能があります。出入りをアニメーション化できるだけでなく、位置を変更することもできます。この新しい機能を使用するには、新しく追加された v-move クラスを使用するだけです。

/* css */
.インラインブロック {
    表示: インラインブロック;
    右マージン: 10px;
}
 
.v-enter-from、
.v-leave-to {
    不透明度: 0;
    変換: translateY(30px);
}
 
.v-enter-active {
    遷移: すべて 1 の緩和;
}
 
.v-アクティブ状態を解除{
    位置: 絶対;
}
 
.v-移動{
    遷移: すべて 1 の緩和;
}

6. 状態アニメーション

データ要素自体についても、数値や演算、カラー表示、SVG ノードの位置、要素のサイズなどのプロパティの変更によってアニメーション効果を実現できます。

番号変更の例:

const app = Vue.createApp({
    データ（） {
        戻る {
            番号: 1
        }
    },
    メソッド: {
        ハンドルクリック() {
            定数タイマー = setInterval(() => {
                if (this.number >= 10) {
                    クリアインターバル(タイマー)
                }それ以外{
                    this.number++;
                }
            }, 100);
        }
    },
    テンプレート: `
        <div>{{番号}}</div>
        <button @click='handleClick'>追加</button>
    `
});

要約する

Vue を使用して CSS トランジションとアニメーションを実装する方法に関するこの記事はこれで終わりです。Vue を使用して CSS トランジションとアニメーションを実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。

以下もご興味があるかもしれません: