Vueで時間差遷移を実装する方法

Vue の時差トランジションの実装方法: 1. 対応する vue ファイルを開きます; 2. トランジション グループ コンポーネントを使用して、ラップされたリスト内の各要素でトランジション コンポーネントをバッチ操作します; 3. 各リスト項目にちょうどさまざまな遅延を追加します。

このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。

vue の時間差遷移を実現するにはどうすればよいですか?

#Vue のリストの時間差遷移

# に基づくvue を使用するには、vue の Vueで時間差遷移を実装する方法 と Vueで時間差遷移を実装する方法-group を使用し、理解している必要があります。

Vueで時間差遷移を実装する方法

vue のドキュメントには、transtion コンポーネントの非常に詳細な 分析 がすでに記載されています。

これが私の理解です:

transtion は vue によって提供される抽象コンポーネントであり、ラップされたサブ要素を適切なタイミングで操作するのに役立ちます。

適切な時間は次のとおりです:

1. beforeEnter dom は js から生成され、フレームはページに挿入されたばかりです (アニメーションの開始に相当します)。下の図)
2. enter dom ページ挿入後の次のフレーム (下のアニメーションに相当)
3. afterEnter dom 後の次のフレームアニメーションが完了しました (下の図に対応するアニメーションが終了します)

##Vueで時間差遷移を実装する方法-group

ransition -groupComponent transtion コンポーネント操作は、パッケージ化されたリスト内の各要素に対してバッチで実行されます。

html
<div>
    <vue>
        <item></item>
    </vue>で時間差遷移を実装する方法-group>
</div>

css.list-enter {    opacity: 0;    transform: translateY(100%);
}.list-enter-active {    Vueで時間差遷移を実装する方法: .3s;
}/* enter-to其实可以不用写, 没有显性写明，就是默认的opacity: 1;transform: none;  */.list-enter-to {    opacity: 1;    transform: translateY(0);
}

次に、各リスト項目に異なる遅延を追加します。

Vueで時間差遷移を実装する方法-delay

css.list-enter-active:nth-child(5n+2) {    Vueで時間差遷移を実装する方法-delay: .3s;
}.list-enter-active:nth-child(5n+3) {    Vueで時間差遷移を実装する方法-delay: .5s;
}.list-enter-active:nth-child(5n+4) {    Vueで時間差遷移を実装する方法-delay: .7s;
}.list-enter-active:nth-child(5n+5) {    Vueで時間差遷移を実装する方法-delay: .9s;
}复制代码

Vueで時間差遷移を実装する方法-lay を CSS セレクターで使用すると、確かに時間差のある遷移を実現できます。

#ただし、大量の CSS を記述する必要があり、変更が柔軟ではないという欠点もあります。

次に、vue の JavaScript フックを使用して実装します。

Vueで時間差遷移を実装する方法

html<div>
    <!-- 这里加上 v-bind:css="false" 让vue跳过对css的检测，让我们更好控制 动画完成的时机 -->
    <vue>

        <item></item>

    </vue>で時間差遷移を実装する方法-group></div>复制代码

JavaScript のみを使用して遷移する場合は、enter および Leave のコールバックに Done を使用する必要があります。それ以外の場合、それらは同期的に呼び出され、移行はすぐに完了します。

new Vue({    el: "#app",    data: () => ({        num: 0
    }),    methods: {        //让我们在 beforeEnter enter afterEnter 钩子里，把 vue 帮我们做的事，自己做一遍:
        //添加移除 class 类名，监听 Vueで時間差遷移を実装する方法end 事件。
        beforeEnter(dom) {
            dom.classList.add('list-enter', 'list-enter-active');
        },        enter(dom,done) {            let delay = dom.dataset.delay;            Vueで時間差遷移を実装する方法(function () {
                dom.classList.remove('list-enter');
                dom.classList.add('list-enter-to');                //监听 Vueで時間差遷移を実装する方法end 事件
                var Vueで時間差遷移を実装する方法end = window.onVueで時間差遷移を実装する方法end ? "Vueで時間差遷移を実装する方法end" : "webkitTransitionEnd";
                dom.addEventListener(Vueで時間差遷移を実装する方法end, function onEnd() {
                  dom.removeEventListener(Vueで時間差遷移を実装する方法end, onEnd);                  done(); //调用done() 告诉vue动画已完成，以触发 afterEnter 钩子
                });
            }, delay)
        },        afterEnter(dom) {
            dom.classList.remove('list-enter-to', 'list-enter-active');
        }
    }
})复制代码

現在のところ、これはうまく動作し、大量の CSS を記述することなく、時間差のある遷移の効果を実現しています。

振り返ってみると、

.list-enter .list-enter-to

と Vueで時間差遷移を実装する方法 を使用して、合計 2 つのことを実行しました。ブラウザ プロセッサは、リスト項目を

opacity 0 translationY(100%

) から opacity 1 translationY(0) にさまざまなタイミングで遷移させます。 要素のさまざまな状態をブラウザに伝えます。クラス名に加えて、

DOM を直接操作して、スタイルをインラインで記述することができます。 CSS をまったく記述していない クラス名に加えて、

にはさらにプログラム的なプロパティを持つこともできます。

Vueで時間差遷移を実装する方法

html
<div>
        <vue>

            <item></item>

        </vue>で時間差遷移を実装する方法-group>
    </div>

new Vue({
    el: "#app",
    data: () => ({
        num: 0
    }),
    methods: {        beforeEnter(dom) {
            let { x = 0, y = 0, s = 1, opacity = 0 } = dom.dataset;
            dom.Vueで時間差遷移を実装する方法.cssText = `Vueで時間差遷移を実装する方法: .3s;opacity: ${opacity};transform: scale(${s}) translateX(${x}) translateY(${y});`;
        },        enter(dom,done) {
            let delay = dom.dataset.delay;            Vueで時間差遷移を実装する方法(function () {
                dom.Vueで時間差遷移を実装する方法.cssText = `Vueで時間差遷移を実装する方法: .3s;opacity: 1;transform: scale(1) translateX(0) translateY(0);`;                //监听 Vueで時間差遷移を実装する方法end 事件
                var Vueで時間差遷移を実装する方法end = window.onVueで時間差遷移を実装する方法end ? "Vueで時間差遷移を実装する方法end" : "webkitTransitionEnd";
                dom.addEventListener(Vueで時間差遷移を実装する方法end, function onEnd() {
                  dom.removeEventListener(Vueで時間差遷移を実装する方法end, onEnd);                  done(); //调用done() 告诉vue动画已完成，以触发 afterEnter 钩子
                });
            }, delay)
        },        afterEnter(dom) {
            dom.Vueで時間差遷移を実装する方法.cssText = "";
        }
    }
})

そうですね、しかし、すべて JS で記述されているため、制限できるのは想像力だけです。 。

html
    <item></item>

getRandom() {    var rate = Math.floor(Math.random() * 90 + 10);    return Math.random() > 0.5 ? rate : -1 * rate;
}

推奨学習: 「

vue.js ビデオ チュートリアル 」

以上がVueで時間差遷移を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。