ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して Vue3 にアニメーションを実装するにはどうすればよいですか?
JavaScript を使用して Vue3 にアニメーションを実装するにはどうすればよいですか?
- WBOY転載
- 2023-05-09 23:34:061136ブラウズ
概要
実はアニメーションはCSSだけでなくjsでも実現できるのですが、両者の違いは何でしょうか？ CSS はアニメーションの表示に重点を置いており、パフォーマンスが優れています。一方、js メソッドのパフォーマンスは若干劣りますが、アニメーション実行の各プロセスで追加の操作を行うことができます。つまり、アニメーションの実行開始から実行、終了までのプロセスをCSSで行う場合、アニメーションのプロパティを制御できるのはせいぜいアニメーションを表示することだけです。 jsを使用すると、アニメーションの実行開始時にdom要素を操作して必要な効果を追加することができ、アニメーションの実行が終了したら、ダイアログボックスをポップアップするなど、アニメーションを終了するための操作を行うことができます。これらは js を使用して実装すると便利です。
分析例
ある効果を実現したいとします。「hello world」のフォントの色を 1 秒に 1 回赤と緑の間で変化させ、5 秒後に終了し、ポップアップを表示させます。コンテンツの一部を表示するダイアログ ボックスのコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用JS实现动画</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show:false
}
},
methods: {
handleClick(){
this.show = !this.show;
},
handleBeforeEnter(el){
el.style.color = 'red';
},
handleEnterActive(el, done){
const animation = setInterval(() => {
const color = el.style.color;
if(color === 'red'){
el.style.color = 'green';
}else{
el.style.color = 'red';
}
},1000);
setTimeout(() =>{
clearInterval(animation);
done();// 通知下一个函数的执行
},5000);
},
handleEnterEnd(){
alert(123);
}
},
template:
`
<transition
:css="false"
@before-enter="handleBeforeEnter"
@enter="handleEnterActive"
@after-enter="handleEnterEnd">
<div v-if="show" >hello world </div>
</transition>
<button @click="handleClick">switch</button>
`
});
const vm = app.mount('#root');
</script>
</html> 上記のコードから、遷移タグで :css = "false" を使用していることがわかります。アニメーションに js を使用するには、まず CSS を無効にしてから、@before-enter="handleBeforeEnter", @enter="handleEnterActive",@after を実装する必要があります。それぞれ -enter はアニメーション開始前、アニメーション実行中、アニメーション実行終了にそれぞれ対応し、次の 3 つの関数 handleBeforeEnter、handleEnterActive、handleEnterEnd は 3 段階の js 関数に対応しており、これらの関数で実行したい操作を実行できます。この例では:
handleBeforeEnter(el)
{
el.style.color = 'red';
}アニメーションが実行される前に、テキストの色を赤に設定します。
アニメーションが実行されるとき
handleEnterActive(el, done){
const animation = setInterval(() => {
const color = el.style.color;
if(color === 'red'){
el.style.color = 'green';
}else{
el.style.color = 'red';
}
},1000);
setTimeout(() =>{
clearInterval(animation);
done();// 通知下一个函数的执行
},5000);
}アニメーションが実行されると、 1 秒後に設定します。 現在のテキストの色を決定するには、テキストが赤の場合は緑に変更し、緑の場合は赤に変更し、5 秒間続けます。
アニメーションが終了すると
handleEnterEnd(){
alert(123);
}アニメーションが終了すると、handleEnterEndが実行され、ダイアログボックスが表示され、123.
以上がJavaScript を使用して Vue3 にアニメーションを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。