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

使用Vue实现CSS过渡和动画

news 2026/5/12 3:09:21

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

[已解决]Vscode插件Keil Assistant连接Keil后出现的头文件路径无法寻找问题

问题详情按照网络上的教程按照并且配置好vscode的Keil Assistant插件后，成功打开了Keil工程并且编译成功。但是头文件无法跳转，以及出现红色波浪线报错。解决方法在.vscode\c_cpp_properties.json中添加以下两行路径： "includePath&q…...

编程新知 2026/5/12 1:42:01

uni-number-box深度解析：从基础属性到高级双向绑定实战

1. uni-number-box基础入门：从零开始玩转数字输入框第一次接触uni-number-box时，我也觉得这不就是个简单的数字加减控件吗？直到在电商项目中真正用起来，才发现这个看似简单的组件藏着不少门道。uni-number-box是uni-app框架提供的…...

编程新知 2026/5/12 1:04:45

双强联袂，数智共舞 | 中聚信 × 金蝶启联巅峰对话，共探财税未来新航道

3 月 26 日，由金蝶软件（中国）有限公司、贵州启联科技有限公司联合主办，中聚信财税技术研究中心协办的「AI 时代先进管理用金蝶」主题峰会，在贵阳国际生态会议中心圆满落幕。这场聚焦制造企业数字化转型与 AI 赋能管理…...

编程新知 2026/5/11 23:45:23

设计师连夜删稿的真相：Onion Skin未启用导致版本错位！3分钟紧急修复+历史帧自动锚定脚本

更多请点击： https://intelliparadigm.com 第一章：设计师连夜删稿的真相：Onion Skin未启用导致版本错位！3分钟紧急修复历史帧自动锚定脚本当动画师在 Toon Boom Harmony 或 Adobe Animate 中反复导出“看似正确”的中间帧&#…...

编程新知 2026/5/11 23:40:27

大核小核架构的演进：从DVFS到异构计算，应对先进制程挑战

1. 项目概述：大核小核架构的十字路口在移动计算和嵌入式领域，ARM的“大核小核”（big.LITTLE）架构在过去十年里几乎成了高性能低功耗的代名词。从智能手机到平板电脑，再到如今的物联网边缘设备，这套将高性能…...

编程新知 2026/5/11 22:49:48

如何在5分钟内将你的普通鼠标变成macOS生产力神器

如何在5分钟内将你的普通鼠标变成macOS生产力神器【免费下载链接】mac-mouse-fix Mac Mouse Fix - Make Your $10 Mouse Better Than an Apple Trackpad! 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix 还在为macOS上鼠标滚轮生硬、侧键闲置而烦恼吗…...

编程新知 2026/5/11 22:12:13

【运算篇】算术与逻辑律令(3)：比特的手术刀，镜像翻转与空间缝合

在 4-bit 的逻辑地牢里，如果说算术指令提供了“肌肉”，逻辑指令开启了“感官”，那么接下来我们要聊的，则是这台机器最细腻的形态手术。如果说 AND/OR 是在判定“存在”，那么 NOT 和移位指令（SHL/SHR&#x…...

编程新知 2026/5/11 20:06:30

从原理到实践：液压与气压传动核心概念与应用场景解析

1. 液压与气压传动的核心原理液压与气压传动是现代工业中广泛应用的动力传输方式，它们虽然介质不同，但都遵循着相似的物理原理。液压系统使用不可压缩的液体（通常是液压油）作为工作介质，而气压系统则使用可压缩的空气…...

编程新知 2026/5/11 19:40:50

紫光同创Logos系列FPGA实战：BGA封装PCB布局与Fanout布线避坑指南（附示意图）

紫光同创Logos系列FPGA实战：BGA封装PCB布局与Fanout布线避坑指南第一次拿到紫光同创Logos系列FPGA的BGA封装芯片时，那种密密麻麻的焊盘阵列确实会让人头皮发麻。特别是FBG256和FBG484这类高密度封装，如何在有限的空间内完成高质量的Fanout布…...

编程新知 2026/5/11 19:30:41

AI-Trader性能优化：提升AI代理交易速度的10个终极技巧

AI-Trader性能优化：提升AI代理交易速度的10个终极技巧【免费下载链接】AI-Trader "AI-Trader: 100% Fully-Automated Agent-Native Trading" 项目地址: https://gitcode.com/GitHub_Trending/aitrad/AI-Trader AI-Trader作为100%全自动化的AI代理…...

编程新知 2026/5/11 19:05:28

01-初识动画和过渡

动画：

过渡

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

过渡

动画

也可以使用js进行控制

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

相关文章：