JavaScript を使用して Vue3 にアニメーションを実装するにはどうすればよいですか?-Vue.js-php.cn

JavaScript を使用して Vue3 にアニメーションを実装するにはどうすればよいですか?

WBOY

リリース： 2023-05-09 23:34:06

転載

1141 人が閲覧しました

概要

実はアニメーションは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 = &#39;red&#39;;
            },
            handleEnterActive(el, done){
             const animation = setInterval(() => {
                    const color = el.style.color;
                    if(color === &#39;red&#39;){
                        el.style.color = &#39;green&#39;;
                    }else{
                        el.style.color  = &#39;red&#39;;
                    }
                },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(&#39;#root&#39;);
</script>
</html>

ログイン後にコピー

上記のコードから、遷移タグで :css = "false" を使用していることがわかります。アニメーションに js を使用するには、まず CSS を無効にしてから、@before-enter="handleBeforeEnter", @enter="handleEnterActive",@after を実装する必要があります。それぞれ -enter はアニメーション開始前、アニメーション実行中、アニメーション実行終了にそれぞれ対応し、次の 3 つの関数 handleBeforeEnter、handleEnterActive、handleEnterEnd は 3 段階の js 関数に対応しており、これらの関数で実行したい操作を実行できます。この例では:

handleBeforeEnter(el)
{
   el.style.color = &#39;red&#39;;
}

ログイン後にコピー

アニメーションが実行される前に、テキストの色を赤に設定します。

アニメーションが実行されるとき

handleEnterActive(el, done){
             const animation = setInterval(() => {
                    const color = el.style.color;
                    if(color === &#39;red&#39;){
                        el.style.color = &#39;green&#39;;
                    }else{
                        el.style.color  = &#39;red&#39;;
                    }
                },1000);
                setTimeout(() =>{
                    clearInterval(animation);
                    done();// 通知下一个函数的执行
                },5000);
            }

ログイン後にコピー

アニメーションが実行されると、 1 秒後に設定します。現在のテキストの色を決定するには、テキストが赤の場合は緑に変更し、緑の場合は赤に変更し、5 秒間続けます。

アニメーションが終了すると