动画的实现其实不仅可以使用CSS的方式实现,而且还可以使用js的方式实现,二者有啥区别呢?CSS更加注重动画的展现,性能更好,而js的方式性能稍微差点,但是可以在动画执行的每一个过程中做些额外的操作。也就是说动画执行的开始-执行中-结束这个过程,如果使用CSS来做,最多也就是控制下动画的属性啥的,只是为了展示动画。而使用js的方式,我们可以在动画执行开始时,操作dom元素,加我们想要的效果啥的,动画执行结束时我们可以做一些动画结束的操作,比如弹个对话框啥的。这些使用js实现 都会比较方便。
假设我们要实现一个效果:让“hello world”的字体颜色在红色和绿色之间一秒改变一次,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>
从上面的代码中我们可以看到,在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中实现动画?的详细内容。更多信息请关注PHP中文网其他相关文章!