Vue3之使用js实现动画示例解析
概述
动画的实现其实不仅可以使用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.
总结
以上就是使用js实现动画的内容，本文只是简单的介绍了使用js做动画的基本知识，读者可以去自己动手实践一下，体会一下使用CSS和js实现的动画的不同，并对比出他们使用的场景，然后欢迎大家在评论区交流，本文的目的也在于抛砖引玉，更多关于Vue3使用js实现动画的资料请关注脚本之家其它相关文章！
相关文章
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
这篇文章主要介绍了你不知道的Vue技巧之--开发一个可以通过方法调用的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue性能优化之cdn引入vue-Router的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue前端后端的交互方式 axios，axios 为第三方数据请求库，下文具体的内容介绍需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-04-04
Vue中对比scoped css和css module的区别
这篇文章主要介绍了Vue中scoped css和css module的区别对比，scoped css可以直接在能跑起来的vue项目中使用而css module需要增加css-loader配置才能生效。具体内容详情大家参考下本文2018-05-05
这篇文章主要为大家详细介绍了Vue-Router来实现组件间跳转的三种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了Vue 中 onclick和@click区别,简单点说就是onclick 只能触发 js的原生方法,不能触发vue的封装方法,@click 只能触发vue的封装方法,不能触发js的原生方法,需要的朋友可以参考下2024-02-02
本文主要介绍了el-form中的rules未生效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
vue3+vite3+typescript实现验证码功能及表单验证效果
这篇文章主要介绍了vue3+vite3+typescript实现验证码功能及表单验证效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
AES对数据传输加密、解密处理---AES.js，下面分步骤给大家介绍vue使用AES.js的示例代码，感兴趣的朋友跟随小编一起看看吧2021-10-10
今天小编就为大家分享一篇vue prop属性传值与传引用示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论