How to implement animation in Vue3 using JavaScript?-Vue.js-php.cn

How to implement animation in Vue3 using JavaScript?

WBOY

Release： 2023-05-09 23:34:06

forward

1172 people have browsed it

Overview

In fact, animation can be realized not only by CSS, but also by js. What is the difference between the two? CSS pays more attention to the display of animation and has better performance, while the performance of js method is slightly worse, but it can do additional operations in each process of animation execution. That is to say, the process of animation execution from start to execution to end. If you use CSS to do it, at most you can control the properties of the animation, just to display the animation. Using js, we can operate the dom element at the beginning of the animation execution and add the effects we want. When the animation execution ends, we can do some operations to end the animation, such as popping up a dialog box or something. It is more convenient to implement these using js.

Example analysis

Suppose we want to achieve an effect: let the font color of "hello world" change between red and green once a second, end after 5 seconds, and then pop up a dialog box, showing a piece of content, the code is as follows:

<!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>

Copy after login

From the above code we can see that in the transition tag we use :css = "false" This is because we To use js for animation, you must first disable css, and then implement @before-enter="handleBeforeEnter", @enter="handleEnterActive",@after respectively -enter corresponds to before the animation starts, during the animation execution, and ends the animation execution respectively, and the following three functions handleBeforeEnter, handleEnterActive, handleEnterEnd correspond to Three stages of js functions, we can perform the operations we want to perform in these functions. In this example:

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

Copy after login

Before the animation is executed, we set the color of the text to red

When the animation is executed

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);
            }

Copy after login

When the animation is executed, we set it after 1 second To determine the color of the current text, if it is red, change it to green, if it is green, change it to red, and then continue for 5 seconds.

When the animation ends

handleEnterEnd(){
     alert(123);
}

Copy after login

After the animation ends, handleEnterEnd will be executed, and then a dialog box will pop up, showing 123.

The above is the detailed content of How to implement animation in Vue3 using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!