怎么用JavaScript在Vue3中实现动画？

概述

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

实例解析

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

nbsp;html>                        
 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:         `                      
hello world                     switch        `    });    const vm = app.mount('#root');
登录后复制
从上面的代码中我们可以看到，在transition标签中我们使用了:css = “false” 这是因为我们要使用js做动画，所以要先禁用掉css，然后分别实现了@before-enter=”handleBeforeEnter”, @enter=”handleEnterActive” ,@after-enter 分别对应动画开始前，动画执行中，动画执行结束，而后面的handleBeforeEnter,handleEnterActive,handleEnterEnd三个函数是对应三个阶段的js函数，我们可以在这几个函数中执行我们想要执行的操作。在本例中：
handleBeforeEnter(el){   el.style.color = 'red';}
登录后复制
动画执行前我们将文本的颜色设置成红色
当动画执行的时候
立即学习“Java免费学习笔记（深入）”；
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中实现动画？的详细内容，更多请关注【创想鸟】其它相关文章！