ホームページ > 記事 > ウェブフロントエンド > Vueで時間差遷移を実装する方法
Vueで時間差遷移を実装する方法
- 藏色散人オリジナル
- 2022-12-26 15:38:572629ブラウズ
Vue の時差トランジションの実装方法: 1. 対応する vue ファイルを開きます; 2. トランジション グループ コンポーネントを使用して、ラップされたリスト内の各要素でトランジション コンポーネントをバッチ操作します; 3. 各リスト項目にちょうどさまざまな遅延を追加します。
このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。
vue の時間差遷移を実現するにはどうすればよいですか?
#Vue のリストの時間差遷移
# に基づくvue を使用するには、vue の Vueで時間差遷移を実装する方法 と Vueで時間差遷移を実装する方法-group を使用し、理解している必要があります。
Vueで時間差遷移を実装する方法
vue のドキュメントには、transtion コンポーネントの非常に詳細な 分析 がすでに記載されています。
これが私の理解です:
transtion は vue によって提供される抽象コンポーネントであり、ラップされたサブ要素を適切なタイミングで操作するのに役立ちます。
適切な時間は次のとおりです:
-
beforeEnterdom は js から生成され、フレームはページに挿入されたばかりです (アニメーションの開始に相当します)。下の図) -
enterdom ページ挿入後の次のフレーム (下のアニメーションに相当) -
afterEnterdom 後の次のフレームアニメーションが完了しました (下の図に対応するアニメーションが終了します)
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);
}
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;
}复制代码
#ただし、大量の 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');
}
}
})复制代码
振り返ってみると、
.list-enter .list-enter-to と Vueで時間差遷移を実装する方法 を使用して、合計 2 つのことを実行しました。ブラウザ プロセッサは、リスト項目を
) から 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で時間差遷移を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。