如何用JavaScript在Vue3中实现动画

如何用JavaScript在Vue3中实现动画

本文讲解"怎么用JavaScript在Vue3中实现动画",希望能够解决相关问题。

概述

动画的实现其实不仅可以使用CSS的方式实现,而且还可以使用js的方式实现,二者有啥区别呢?CSS更加注重动画的展现,性能更好,而js的方式性能稍微差点,但是可以在动画执行的每一个过程中做些额外的操作。也就是说动画执行的开始-执行中-结束这个过程,如果使用CSS来做,最多也就是控制下动画的属性啥的,只是为了展示动画。而使用js的方式,我们可以在动画执行开始时,操作dom元素,加我们想要的效果啥的,动画执行结束时我们可以做一些动画结束的操作,比如弹个对话框啥的。这些使用js实现 都会比较方便。

实例解析

假设我们要实现一个效果:让“hello world”的字体颜色在红色和绿色之间一秒改变一次,5秒后结束,然后结束后弹出一个对话框,展示一段内容,代码如下:

 <html lang="en">     <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"" vue@next"="">


    
<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">               
hello world 
          </transition>           <button @click="handleClick">switch</button>         `     });     const vm = app.mount('#root'); </script> </div id="root"></script src="https:></meta name="viewport" content="width=device-width, initial-scale=1.0"></meta http-equiv="x-ua-compatible" content="ie=edge"></meta charset="utf-8"></html lang="en">

从上面的代码中我们可以看到,在transition标签中我们使用了:css = "false" 这是因为我们要使用js做动画,所以要先禁用掉css,然后分别实现了@before-enter="handleBeforeEnter", @enter="handleEnterActive" ,@after-enter 分别对应动画开始前,动画执行中,动画执行结束,而后面的handleBeforeEnter,handleEnterActive,handleEnterEnd三个函数是对应三个阶段的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中实现动画" 就介绍到此。希望多多支持硕编程

下一节:javascript标签的下拉框怎么定位

JS 编程技术

相关文章