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

Vue.js的CSS过渡与动画：常用案例解析

news 来源：原创 2025/7/5 9:48:37

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

引言

Vue.js是一个流行的前端JavaScript框架，它提供了一种简单而强大的方式来构建用户界面和单页应用。Vue.js的核心库专注于视图层，使得它非常易于学习和使用，同时也与其他库或现有项目集成得非常顺畅。在Vue.js中，CSS过渡与动画是提升用户体验的重要组成部分。本文将通过一些常用案例，探讨CSS过渡与动画的使用方法和优势，展示其强大的功能。

CSS过渡与动画的基本概念

在Vue.js中，CSS过渡与动画是通过<transition>和<transition-group>元素实现的。<transition>元素用于单个元素的过渡效果，<transition-group>元素用于多个元素的过渡效果。

CSS过渡与动画的基本语法

CSS过渡与动画的基本语法如下：

<div id="app"><button @click="show = !show">Toggle</button><transition name="fade"><p v-if="show">Hello Vue!</p></transition>
</div><style>
.fade-enter-active, .fade-leave-active {transition: opacity 1s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style><script>
new Vue({el: '#app',data: {show: true}
});
</script>

在上述代码中，我们使用<transition>元素包裹了一个p元素，并定义了一个名为fade的过渡效果。在CSS中，我们定义了过渡效果的样式。

CSS过渡与动画的常用案例

CSS过渡与动画在许多场景下都非常有用，下面通过一些有趣的示例来展示其应用。

1. 元素显示和隐藏的过渡效果

CSS过渡与动画可以用于实现元素显示和隐藏的过渡效果。

<div id="app"><button @click="show = !show">Toggle</button><transition name="fade"><p v-if="show">Hello Vue!</p></transition>
</div><style>
.fade-enter-active, .fade-leave-active {transition: opacity 1s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style><script>
new Vue({el: '#app',data: {show: true}
});
</script>

在上述代码中，我们使用<transition>元素包裹了一个p元素，并定义了一个名为fade的过渡效果。在CSS中，我们定义了过渡效果的样式。

2. 列表的过渡效果

CSS过渡与动画可以用于实现列表的过渡效果。

<div id="app"><button @click="addItem">Add Item</button><transition-group name="list" tag="ul"><li v-for="(item, index) in items" :key="index">{{ item }}</li></transition-group>
</div><style>
.list-enter-active, .list-leave-active {transition: all 1s;
}
.list-enter, .list-leave-to {opacity: 0;transform: translateY(30px);
}
</style><script>
new Vue({el: '#app',data: {items: []},methods: {addItem: function() {this.items.push('Item ' + (this.items.length + 1));}}
});
</script>

在上述代码中，我们使用<transition-group>元素包裹了一个ul元素，并定义了一个名为list的过渡效果。在CSS中，我们定义了过渡效果的样式。

3. 自定义过渡效果

CSS过渡与动画可以用于实现自定义过渡效果。

<div id="app"><button @click="show = !show">Toggle</button><transition name="custom"><p v-if="show">Hello Vue!</p></transition>
</div><style>
.custom-enter-active, .custom-leave-active {transition: all 1s;
}
.custom-enter, .custom-leave-to {opacity: 0;transform: scale(0);
}
</style><script>
new Vue({el: '#app',data: {show: true}
});
</script>

在上述代码中，我们使用<transition>元素包裹了一个p元素，并定义了一个名为custom的过渡效果。在CSS中，我们定义了过渡效果的样式。

结论

CSS过渡与动画是Vue.js用户体验提升的重要组成部分，它使得过渡效果的实现变得更加简单和直观。通过使用CSS过渡与动画，开发者可以轻松实现复杂的过渡效果和交互。

希望本文能帮助你更好地理解和使用CSS过渡与动画，提升你的Vue.js编程水平。无论是实现元素显示和隐藏的过渡效果、实现列表的过渡效果，还是实现自定义过渡效果，CSS过渡与动画都将是你不可或缺的工具。祝你编程愉快！

Vue.js的CSS过渡与动画：常用案例解析

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

编程日记 2025/7/5 9:48:37

【论文阅读】Co2l: Contrastive continual learning

原文链接：[2106.14413] Co$^2$L: Contrastive Continual Learning 阅读本文前，需要对持续学习的基本概念以及面临的问题有大致了解，可参考综述： Wang L, Zhang X, Su H, et al. A comprehensive survey of continual learning: …...

编程日记 2025/7/5 9:06:12

Python给对象数组排序

文章目录 1. 使用sorted()函数（返回新的排序后的列表）2. 使用list.sort()方法（原地排序，不返回新列表）3. 如果数据结构是集合（set），集合本身是无序的，无法直接排序&#…...

编程日记 2025/7/5 9:05:16

Docker-清理容器空间prune

docker system prune -a 是一个非常有用的命令，用于清理 Docker 系统中未使用的资源，包括停止的容器、未使用的网络、卷以及未被任何容器引用的镜像（悬空镜像和所有未使用的镜像）。以下是关于该命令的详细说明： 命令…...

编程日记 2025/7/5 8:55:38

Kubernetes》》K8S》》Deployment 、Pod、Rs 、部署 nginx

Deployment deployment文档说明 kubectl get rs,deployment,pods 删除pod 、deployment 、service # 如果只删除pod，deployment会自动重建，所以应该先删除deployment。 # 下面演示的是删除所有deployment，可以指定只删除某个 # 删除所有…...

编程日记 2025/7/5 5:38:16

【Zookeeper搭建】Zookeeper分布式集群搭建完整指南

Zookeeper分布式集群搭建 （一）克隆前准备工作一、时钟同步步骤： 1、输入date命令可以查看当前系统时间，可以看到此时系统时间为PDT（部分机器或许为EST），并非中国标准时间。我们在中国地区…...

编程日记 2025/7/5 8:43:06

基于YOLO11/WVP的电梯系统开发-模型训练与rk3568移植

1. 环境准备代码下载： https://github.com/ultralytics/ultralytics.git切换到 8.3.0 以上的分支，yolov11 只在上述分支支持, 下载后在 ultralytics 根目录下安装 yolo 依赖环境： pip install -e . -i https://pypi.tuna.tsinghua.edu.cn…...

编程日记 2025/7/5 8:26:17

基础用法 int p[N];//路径压缩寻找祖宗节点 int find(int x){if(p[x]!x) p[x]find(p[x]);return p[x]; }int main(){ //初始化for(int i1;i<n;i) p[i]i; }合并 void merge(int a,int b){int aafind(a),bbfind(bb);if(aa!bb){p[aa]bb;} }查询是否联通 bool is_connected(…...

编程日记 2025/7/5 8:12:23

人工智能与软件工程结合的发展趋势

AI与软件工程的结合正在深刻改变软件开发的流程、工具和方法，其发展方向涵盖了从代码生成到系统维护的整个生命周期。以下是主要的发展方向和技术趋势： 1. 软件架构体系的重构从“面向过程”到“面向目标”的架构转型： AI驱动软件设计以目标…...

编程日记 2025/7/5 8:48:45

Compose 实践与探索十七 —— 多指手势与自定义触摸反馈

上一节我们讲了滑动的手势识别以及嵌套滑动，二者都属于触摸反馈这个大的范畴内的知识。本节我们将深入触摸反馈这个话题，讲一讲多指手势的识别与完全自定义的触摸反馈的实现。 1、多指手势多指手势可以分为两类： 利用 API 处理预设好的手…...

编程日记 2025/7/5 8:38:18

哈希表 - 两个数组的交集(集合、数组) - JS

一、Set基础在 JavaScript 中，Set 是一种集合（Collection）数据结构，用于存储唯一值（不允许重复），并且可以高效地进行添加、删除、查询等操作。它类似于数组（Array）…...

编程日记 2025/7/5 7:40:22

26_ajax

目录了解接口前后端交互一、安装服务器环境 nodejs ajax发起请求渲染响应结果 get方式传递参数 post方式传递参数封装ajax_上封装ajax下了解清楚前后端交互就可以写一些后端代码了。小项目现在写项目开发的时候都是前后端分离之前都没有前端这个东西&a…...

编程日记 2025/7/5 7:10:31

Java面试黄金宝典24

1. 什么是跳表定义跳表（Skip List）是一种随机化的数据结构，它基于有序链表发展而来，通过在每个节点中维护多个指向其他节点的指针，以多层链表的形式组织数据。其核心思想是在链表基础上增加额外层次，每…...

编程日记 2025/7/5 7:11:30

每日c/c++题备战蓝桥杯（全排列问题）

题目描述按照字典序输出自然数 1 到 n 所有不重复的排列，即 n 的全排列，要求所产生的任一数字序列中不允许出现重复的数字。输入格式一个整数 n。输出格式由 1∼n 组成的所有不重复的数字序列，每行一个序列。每个数字保留 5 个场…...

编程日记 2025/7/4 14:35:00

Layui实现table动态添加行，可删除、表格可编辑，小数校验

实现如图需求，layui实现的可编辑table，包含B、C、D、E列，A列不用实现出现，A列放在附件就是让你明白，不同的物料名称，行是不一样的。除了头部表头和E列不能编辑，每个表格都可编辑，其中…...

编程日记 2025/7/5 7:35:15

Spring Boot 非web应用程序

在 Spring Boot 框架中，要创建一个非Web应用程序（纯Java程序） main方法运行，不启动tomcat，main方法执行结束，程序就退出了； 方式一 1、SpringBoot开发纯Java程序，应该采…...

编程日记 2025/7/5 8:05:01

数据分析中的基线校正算法全解析：原理、实现与应用

数据分析中的基线校正算法全解析：原理、实现与应用在数据分析中，基线漂移是一个常见问题，会严重影响数据的解释和分析精度。本文将详细介绍12种主流基线校正方法，包括数学原理、Python实现代码和适用场景分析。基线漂移问题概述基线漂移主要由以下因素引起：仪器强度…...

编程日记 2025/6/30 12:20:23

国外计算机证书推荐（考证）（6 Sigma、AWS、APICS、IIA、Microsoft、Oracle、PMI、Red Hat）

文章目录证书推荐1. 六西格玛 (6 Sigma)2. 亚马逊网络服务 (AWS)3. 美国生产与库存控制学会 (APICS)4. 内部审计师协会 (IIA)5. 微软 (Microsoft)6. 甲骨文 (Oracle)7. 项目管理协会 (PMI)8. 红帽 (Red Hat) 证书推荐 1. 六西格玛 (6 Sigma) 介绍：六西格玛是一种…...

编程日记 2025/7/5 7:13:20

linux》》docker 、containerd 保存镜像、打包tar、加载tar镜像

Linux》》docker: 默认情况下，Docker镜像保存在/var/lib/docker/目录下。当您使用docker pull命令从Docker Hub或私有镜像仓库中拉取镜像时，Docker会自动将镜像文件保存在/var/lib/docker/image/目录下。每个镜像都由一个或多个层组成，这些…...

编程日记 2025/7/5 7:39:10

大数据（2）Hadoop架构深度拆解：HDFS与MapReduce企业级实战与高阶调优

目录一、分布式系统的设计哲学演进1.1 从Google三驾马车到现代数据湖二、企业级HDFS架构全景图2.1 联邦架构的深度实践2.2 生产环境容灾设计2.3 性能压测方法论三、MapReduce引擎内核解密3.1 Shuffle机制全链路优化3.2 资源调度革命：从MRv1到YARN3.3 企业级编码规…...

编程日记 2025/7/5 7:23:15

【数学建模】动态规划算法(Dynamic Programming，简称DP)详解与应用

动态规划算法详解与应用文章目录动态规划算法详解与应用引言动态规划的基本概念动态规划的设计步骤经典动态规划问题1. 斐波那契数列2. 背包问题3. 最长公共子序列(LCS) 动态规划的优化技巧动态规划的应用领域总结引言动态规划(Dynamic Programming，简称DP)是一…...

编程日记 2025/6/30 8:39:46

UE学习记录part11

第14节 breakable actors 147 destructible meshes a geometry collection is basically a set of static meshes that we get after we fracture a mesh. 几何体集合基本上是我们在断开网格后获得的一组静态网格。选中要破碎的网格物品，创建集合可以选择不同的…...

编程日记 2025/7/2 5:17:35

LeetCode知识点整理

1、Scanner 输入： import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);// 读取整数int num scanner.nextInt();// 读取一行字符串String line scanner.nextLine();scanner.close();…...

编程日记 2025/7/3 8:56:40

浅析车规芯片软错误防护加固的重要性

随着汽车电子技术的飞速发展，汽车已经从传统的机械交通工具转变为高度依赖电子系统的智能移动终端。车规芯片作为汽车电子系统的核心部件，其可靠性和安全性直接关系到车辆的正常运行和驾乘人员的安全。然而，车规芯片在复杂的运行环境中面临着…...

编程日记 2025/7/4 1:30:29

Android Jetpack学习总结（源码级理解）

ViewModel 和 LiveData 是 Android Jetpack 组件库中的两个核心组件，它们能帮助开发者更有效地管理 UI 相关的数据，并且能够在配置变更（如屏幕旋转）时保存和恢复 UI 数据。 ViewModel作用瞬态数据丢失的恢复，比如横竖…...

编程日记 2025/7/5 8:58:22

Matlab_Simulink中导入CSV数据与仿真实现方法

前言在Simulink仿真中，常需将外部数据（如CSV文件或MATLAB工作空间变量）作为输入信号驱动模型。本文介绍如何高效导入CSV数据至MATLAB工作空间，并通过From Workspace模块实现数据到Simulink的精确传输，适用于运动控制…...

编程日记 2025/7/5 8:37:30

Go 语言规范学习（6）

文章目录 StatementsTerminating statementsEmpty statementsLabeled statementsExpression statementsSend statementsIncDec statementsAssignment statementsIf statementsSwitch statementsExpression switchesType switches For statementsFor statements with single con…...

编程日记 2025/7/3 21:24:14