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

使用Vue实现CSS过渡和动画

news 2025/12/19 0:55:33

01-初识动画和过渡

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>使用vue实现css过渡和动画</title></head><body><script src="https://unpkg.com/vue"></script><div id="root"></div><script>const app = Vue.createApp({template: `<div>hello world</div>`,});const vm = app.mount('#root')</script></body>
</html>

过渡和动画的区别：
在这里插入图片描述

动画：

<style>@keyframes move {0% {transform: translateX(100px);}50% {transform: translateX(50px);}100% {transform: translateX(0);}}.animation {animation: move 2s;}
</style>const app = Vue.createApp({template: `<div class="animation">hello world</div>`,
});
const vm = app.mount('#root')

效果：在这里插入图片描述
通过点击触发：

<script>const app = Vue.createApp({data() {return {animate: {animation: false}}},methods: {handleClick() {this.animate.animation = !this.animate.animation}},template: `<div :class="animate">hello world</div><button @click="handleClick">按钮</button>`,});const vm = app.mount('#root')
</script>

在这里插入图片描述

过渡

<style>
.pink {background-color: pink;
}
.green {background-color: green;
}
.transition {transition: 2s ease;
}
</style>

const app = Vue.createApp({data() {return {animate: {transition: true,green: true,pink: false}}},methods: {handleClick() {this.animate.green = !this.animate.greenthis.animate.pink = !this.animate.pink}},template: `<div :class="animate">hello world</div><button @click="handleClick">按钮</button>`,
});
const vm = app.mount('#root')

效果：
在这里插入图片描述

02-单元素/组件的入场和出场动画

过渡

基本使用：
入场过渡：

<style>/* 进入，开始 */.v-enter-from {opacity: 0;}/* 开始，结束规定动画的效果，这个必须要有，否则不生效 */.v-enter-active {transition: opacity 2s ease;}/* 出去，结束 */.v-enter-to {opacity: 1;}
</style>

const app = Vue.createApp({data() {return {show: false}},methods: {handleClick() {this.show = !this.show}},template: `<transition><div v-if="show">hello world</div></transition><button @click="handleClick">按钮</button>`,
});
const vm = app.mount('#root')

入场过渡效果：
在这里插入图片描述
出场过渡：

<style>
/* 出场的开始 */
.v-leave-from {opacity: 1;
}
.v-leave-active {transition: opacity 2s ease;
}
/* 出场的结束 */
.v-leave-to {opacity: 0;
}
</style>

出场过渡效果：
在这里插入图片描述

动画

<style>
@keyframes move {0% {transform: translateX(-100px);}50% {transform: translateX(-50px);}75% {transform: translateX(50px);}100% {transform: translateX(0);}
}
// 只需要 v-enter-active v-leave-active 即可
.v-enter-active {animation: move 2s ease-in;
}
.v-leave-active {animation: move 2s ease-in;
}
</style>

在这里插入图片描述
可以使用别名：

<style>
.yunmu-enter-active,
.yunmu-leave-active {animation: move 2s ease-in;
}
</style>

template: `
<transition name="yunmu"><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

也可以使用enter-active-class leave-active-class起别名

<style>
.hello,
.bye {animation: move 2s ease-in;
}
</style>

template: `
<transition name="yunmu"enter-active-class="hello"leave-active-class="bye"
><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>

起别名的好处，引入第三方组件库，直接添加name属性就可以完成对应的动画，比如第三方的animate.css
引入第三方动画库：

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

js中直接使用animate__animated animate__bounce

template: `
<transition name="yunmu"enter-active-class="animate__animated animate__bounce"leave-active-class="animate__animated animate__bounce"
><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

在这里插入图片描述
下面再来看这种场景：

<style>
@keyframes move {0% {transform: translateX(100px);}50% {transform: translateX(50px);}100% {transform: translateX(0);}
}
.v-enter-from {color: red;
}.v-enter-active,
.v-leave-active {animation: move 10s ease-in;transition: all 3s ease;
}
.v-leave-active {color: red;
}
</style>

template: `
<transition><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

动画10s，过渡3s;
在这里插入图片描述
可以看到，由于动画的时间比较长，所以过渡完了之后，动画依旧还在进行，如果我们想要达到两者相同的时间的效果的话，就需要制定一个标准：比如以时间短的为结束。可以使用下面的方法：

template: `
<transition type="transition"><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

给transition增加一个type，表示时间以哪个为准。
在这里插入图片描述
也可以使用duration属性，表示过渡和动画的时间

也可以使用js进行控制

// 动画进入之前
handleBeforeEnter(el) {el.style.color = 'red'
},
// 执行过程中
handleEnterActive(el, done) {const timer = setInterval(() => {const color = el.style.color;if(color === 'red') {el.style.color = 'green'} else {el.style.color = 'red'}}, 1000);setTimeout(() => {clearInterval(timer)done()}, 4000);
},
// 动画结束之后的钩子 只有 handleEnterActive 中的done执行完之后，该钩子才会执行
handleAfterEnter() {alert(22222)
}template: `
<transition :css="false"@before-enter="handleBeforeEnter"@enter="handleEnterActive"@after-enter="handleAfterEnter"
><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`,

在这里插入图片描述
另外离开的时候，也有对应的钩子before-leave leave after-leave

03-组件和元素切换动画的实现

<style>
.v-enter-from {opacity: 0;
}
.v-enter-active,
.v-leave-active {transition: opacity 1s;
}
.v-enter-to,
.v-leave-from{opacity: 1;
}
.v-leave-to {opacity: 0;
}
</style>

template: `
<transition 
><div v-if="show">hello world</div><div v-else>Bye world</div>
</transition>
<button @click="handleClick">按钮</button>
`,

在这里插入图片描述
有个问题：两个标签都是慢慢消失，慢慢出来，不是我们想要的效果
在transition标签上面增加mode="out-in"属性，表示先出场，再进场。

对比一下in-out

这样动画就不是一个同步的了。上面的if else标签也可以改成组件。
另外列表组件可以使用transition-group标签进行动画渲染，和transition标签使用差不多。
vue.js的过渡和动画 (更新完成)

使用Vue实现CSS过渡和动画

01-初识动画和过渡 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>使用vue实现css过渡和动画&l…...

编程日记 2024/4/3 11:48:04

一家购物商场的数据运营挑战

✅作者简介：《数据运营：数据分析模型撬动新零售实战》作者、《数据实践之美》作者、数据科技公司创始人、多次参加国家级大数据行业标准研讨及制定、高端企培合作讲师。 🌸公众号：风姑娘的数字视角，免费分享数据应用相…...

编程日记 2024/4/3 11:47:03

React Native框架开发APP，安装免费的图标库（react-native-vector-icons）并使用详解

一、安装图标库要使用免费的图标库，你可以使用 React Native Vector Icons 库。首先，确保你已经安装了 react-native-vector-icons： npm install --save react-native-vector-iconsnpm install --save-dev types/react-native-vector-ic…...

编程日记 2024/4/3 11:45:01

idea端口占用

报错：Verify the connector‘s configuration, identify and stop any process that‘s listening on port XXXX 翻译： 原因： 解决： 一、重启大法二、手动关闭启动spring项目是控制台报错，详细信息如下&#xff…...

编程日记 2024/4/3 11:42:58

MQ消息队列详解以及MQ重复消费问题

MQ消息队列详解以及MQ重复消费问题 1、解耦2、异步调用3、流量削峰4、MQ重复消费问题，以及怎么解决？4.1、重复消费产生4.2、解决方法： https://blog.csdn.net/qq_44240587/article/details/104630567 核心的就是：解耦、异步、削锋…...

编程日记 2024/4/3 11:37:53

系统IO函数接口

目录前言一. man手册 1.1 man手册如何查询 1.2 man手册基础二.系统IO函数接口三.open打开文件夹 3.1 例1 open打开文件 3.2 open打开文件代码 3.3 例2 创建文件四.write写文件 4.1 write写文件五. read读文件 5.1 read读文件与偏移 5.2 偏移细节 5.3 read读文件代码六.复…...

编程日记 2024/4/3 11:35:51

06 监听器

文章目录 SessionAttListenerDemo.javaSessionListenerDemo.javaProductController.java SessionAttListenerDemo.java package com.aistart.listener;import javax.servlet.ServletContext; import javax.servlet.annotation.WebListener; import javax.servlet.http.HttpSess…...

编程日记 2024/4/3 11:34:50

C语言第三十九弹---预处理(上)

✨个人主页： 熬夜学编程的小林 💗系列专栏： 【C语言详解】【数据结构详解】预处理 1、预定义符号 2、#define定义常量 3、#define定义宏 4、带有副作用的宏参数 5、宏替换的规则 6、宏和函数的对比总结在C语言中，预处…...

编程日记 2024/4/3 11:33:49

计算机视觉无人驾驶技术：入门指南

I. 引言： 计算机视觉无人驾驶技术是一种基于计算机视觉和机器学习技术的自动化驾驶技术。它可以通过搭载各种传感器和摄像机，让车辆自主感知周围环境，实现尽可能自动化的驾驶操作。这种技术具有重要性和优势，包括： …...

编程日记 2024/4/3 11:32:47

Golang和Java对比

其实我是Javaer转的Golang，我谈谈自己对Java和Golang的体会我先讲讲我认为Golang的优点 1、Golang是一门新语言，相比于Java，他的生态要小很多，优点很明显，自由度高，学习成本低，能快速拉起一个…...

编程日记 2024/4/3 11:28:44

2024.2.29力扣每日一题——统计可能的树根数目

2024.2.29 题目来源我的题解方法一深度搜索（暴力） 超时方法二树形动态规划题目来源力扣每日一题；题序：2581 我的题解方法一深度搜索（暴力） 超时以每个节点node为跟进行深度搜索，并在搜…...

编程日记 2024/4/3 11:23:39

同一个主机配置多个SSH key

使用git时，我们可能一个git客户端使用多个git服务器，比如github，自建gitlab，gitee，为了防止提交混乱，所以需要一一对应生成公私钥。第一步： 使用ssh-keygen生成多对密钥对，比如&…...

编程日记 2024/4/3 11:18:33

SAP系统财务模块简介：实现财务管理的卓越之道

作为全球领先的企业管理软件提供商，SAP公司开发了一系列强大而全面的财务模块，帮助企业实现财务管理的高效运作与优化。SAP系统的财务模块涵盖了财务核算、成本管理、资金管理、资产会计等多个方面，为企业提供了完整的财务管理解决方案。本文…...

编程日记 2024/4/3 11:16:31

【pytest】功能特性及常用插件

pytest是一个功能强大的Python测试框架，它的语法简洁明了，易于学习和使用。同时，它提供了丰富的功能和插件，使得测试过程更加灵活和高效。功能特性 pytest的主要功能特性包括： 参数化测试：允许使用不同…...

编程日记 2024/4/3 11:10:23

基于SpringBoot和Vue的房产销售系统的设计与实现

今天要和大家聊的是一款基于SpringBoot和Vue的房产销售系统的设计与实现 ！！！ 有需要的小伙伴可以通过文章末尾名片咨询我哦！！！ 💕💕作者：李同学 💕&#x1f…...

编程日记 2024/4/3 11:06:18

ROS2从入门到精通1-2：详解ROS2服务通信机制与自定义服务

目录 0 专栏介绍1 服务通信模型2 服务模型实现(C)3 服务模型实现(Python)4 自定义服务5 话题、服务通信的异同 0 专栏介绍本专栏旨在通过对ROS2的系统学习，掌握ROS2底层基本分布式原理，并具有机器人建模和应用ROS2进行实际项目的开发和调试的工程能力。…...

编程日记 2024/4/3 11:05:16

vue两个特性和什么是MVVM

一、什么是vue 1.构建用户界面用vue往html页面中填充数据，非常的方便 2.框架框架是一套线成的解决方案 vue的指令、组件（是对ui结构的复用）、路由、vuex 二、vue的特性 1.数据驱动视图 2.双向数据绑定 1.数据驱动视图数据的变化会驱动…...

编程日记 2024/4/3 11:02:13

CAD Plant3D 2023 下载地址及安装教程

CAD Plant3D是一款专业的三维工厂设计软件，用于在工业设备和管道设计领域进行建模和绘图。它是Autodesk公司旗下的AutoCAD系列产品之一，专门针对工艺、石油、化工、电力等行业的设计和工程项目。 CAD Plant3D提供了一套丰富的工具和功能，帮助…...

编程日记 2024/4/3 11:01:12

集成电路企业tapeout，如何保证机台数据准确、完整、高效地采集？

Tapeout即流片，集成电路行业中将CDS最终版电路图提交给半导体制造厂商进行物理生产的过程。在芯片设计与制造的流程中，Tapeout是非常重要的阶段，包括了布局（Layout）、连线（Routing）、分析&#…...

编程日记 2024/4/3 11:00:10

Nginx三大常用功能“反向代理，负载均衡，动静分离”

注意：以下案例在Windows系统计算机作为宿主机，Linux CentOS 作为虚拟机的环境中实现一，Nginx配置实例-反向代理 1.反向代理案例一实现效果：使用nginx反向代理，访问 www.123.com 直接跳转到127.0.0.1:8080 准备工…...

编程日记 2024/4/3 10:58:08

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。一、遭遇攻击的紧急应…...

编程新知 2025/12/7 16:06:34

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/12/17 13:07:40

【JVM】- 内存结构

引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...

编程新知 2025/12/18 20:09:12

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2025/12/15 5:43:03

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/12/15 15:34:58

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字不要使用 Kotlin 的任何硬关键字作为方法的名称或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/12/10 4:05:13