企业为什么建设网站,绿色主色调的网站,网站电脑版和手机版区别,广州市网站建设科技公司概述
动画的实现其实不仅可以使用CSS的方式实现#xff0c;而且还可以使用js的方式实现#xff0c;二者有啥区别呢#xff1f;CSS更加注重动画的展现#xff0c;性能更好#xff0c;而js的方式性能稍微差点#xff0c;但是可以在动画执行的每一个过程中做些额外的操作。…概述
动画的实现其实不仅可以使用CSS的方式实现而且还可以使用js的方式实现二者有啥区别呢CSS更加注重动画的展现性能更好而js的方式性能稍微差点但是可以在动画执行的每一个过程中做些额外的操作。也就是说动画执行的开始-执行中-结束这个过程如果使用CSS来做最多也就是控制下动画的属性啥的只是为了展示动画。而使用js的方式我们可以在动画执行开始时操作dom元素加我们想要的效果啥的动画执行结束时我们可以做一些动画结束的操作比如弹个对话框啥的。这些使用js实现 都会比较方便。
实例解析 假设我们要实现一个效果让“hello world”的字体颜色在红色和绿色之间一秒改变一次5秒后结束然后结束后弹出一个对话框展示一段内容代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title使用JS实现动画/titlescript srchttps://unpkg.com/vuenext/script
/head
bodydiv idroot/div
/body
scriptconst 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:cssfalsebefore-enterhandleBeforeEnterenterhandleEnterActiveafter-enterhandleEnterEnddiv v-ifshow hello world /div/transitionbutton clickhandleClickswitch/button});const vm app.mount(#root);
/script
/html从上面的代码中我们可以看到在transition标签中我们使用了:css false 这是因为我们要使用js做动画所以要先禁用掉css然后分别实现了before-enterhandleBeforeEnter, enterhandleEnterActive ,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.
总结
以上就是使用js实现动画的内容本文只是简单的介绍了使用js做动画的基本知识读者可以去自己动手实践一下体会一下使用CSS和js实现的动画的不同并对比出他们使用的场景然后欢迎大家在评论区交流本文的目的也在于抛砖引玉
