当前位置：首页 > news >正文

Vue3之使用js实现动画

news 2026/5/18 9:38:43

概述

动画的实现其实不仅可以使用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实现动画

概述

实例解析

总结

相关文章：

Vue3之使用js实现动画

金三银四，你准备好面试了吗? (附30w字软件测试面试题总结)

【C语言学习】数组

ElasticSearch序列 - SpringBoot整合ES：根据指定的 ids 查询

Spark SQL实战(08)-整合Hive

堆（数据结构系列11）

算法训练第四十二天|01背包问题二维、01背包问题一维、416. 分割等和子集

Java-如何使用Java将图片和文字拼接在一起（并非是给图片加水印）

Metasploit入门到高级【第三章】

枚举的使用

Python进阶语法

Pyspark_结构化流4

Linux cmp 命令

Python入门到高级【第五章】

C语言中（i++）+ （i++）真的每次都等于3吗？

Cursor，程序员的 AI 代码编辑助手

基于XML的自动装配~

完全二叉树的4种遍历方式

【vue2】使用elementUI进行表单验证实操（附源码）

JUC之阻塞队列解读（BlockingQueue）

一键获取Steam游戏清单：Onekey工具让游戏管理变得如此简单

SimulinkVeriStandLabVIEW协同开发——从模型编译到交互式仪表盘部署

快速免费解锁网易云音乐NCM格式：ncmdumpGUI完整使用指南

并行LLM推理技术：Hogwild! Inference原理与应用

Cursor IDE事件日志分析工具：Python实现开发者行为可视化与效率洞察

Gitclaw：封装复杂Git操作，提升开发效率的命令行工具

Gopeed下载器深度解析：从零开始构建你的全平台高速下载解决方案

Arm Morello平台模型与CHERI安全扩展开发指南

终极网络资源下载神器：面向内容创作者的5步实战指南

从零部署开源语音助手：OpenClaw项目实战与二次开发指南