vue折叠展开transition动画使用keyframes实现
需求,我正常的菜单功能有隐藏与显示功能,需要增加动画
打开的时候宽度从0到300,关闭的时候,宽度从300到0
<template> <div id="app"> <button @click="toggleLength">Toggle Length</button> <transition name="slide"> <div v-if="show" class="box"></div> </transition> </div>
</template> <script>
import { ref } from 'vue'; export default { setup() { const show = ref(false); const toggleLength = () => { show.value = !show.value; }; return { show, toggleLength, }; },
};
</script> <style>
#app { text-align: center; margin-top: 60px;
} button { padding: 10px 20px;
} .box { width: 300px; height: 100px; background-color: red; transition: width 2s; /* 添加过渡效果 */
} /* 使用 @keyframes 定义过渡效果 */
@keyframes slide { 0% { width: 0px; } /* 打开时宽度从0开始 */ 100% { width: 300px; } /* 打开时宽度变为300 */
}
@keyframes slideReverse { 0% { width: 300px; } /* 关闭时宽度从300开始 */ 100% { width: 0px; } /* 关闭时宽度变为0 */
} .slide-enter-active, .slide-leave-active { animation: slide 2s forwards; /* 应用定义的动画 */
}
.slide-leave-active { animation-direction: reverse; /* 设置动画反向播放 */
}
</style>
相关文章:
vue折叠展开transition动画使用keyframes实现
需求,我正常的菜单功能有隐藏与显示功能,需要增加动画 打开的时候宽度从0到300,关闭的时候,宽度从300到0 <template> <div id"app"> <button click"toggleLength">Toggle Length</bu…...
书生·浦语大模型实战营-学习笔记5
LMDeploy 大模型量化部署实践 大模型部署背景 LMDeploy简介 轻量化、推理引擎、服务 核心功能-量化 显存消耗变少了 大语言模型是典型的访存密集型任务,因为它是decoder-by-decoder 先把数据量化为INT4存起来,算的时候会反量化为FP16 AWQ算法&a…...
10. Profile
1. 区分环境的配置 1.1. properties 配置 假设,一个应用的工作环境有:dev、test、prod 那么,我们可以添加 4 个配置文件: applcation.properties - 公共配置application-dev.properties - 开发环境配置application-test.proper…...
YOLO 自己训练一个模型
一、准备数据集 我的版本是yolov8 8.11 这个目录结构很重要 ultralytics-main | datasets|coco|train|val 二、训练 编写yaml 文件 # Train/val/test sets as 1) dir: path/to/imgs, 2) file: path/to/imgs.txt, or 3) list: [path/to/imgs1, path/to/imgs2, ..] path…...
3.Eureka注册中心
3.Eureka注册中心 假如我们的服务提供者user-service部署了多个实例,如图: 大家思考几个问题: order-service在发起远程调用的时候,该如何得知user-service实例的ip地址和端口?有多个user-service实例地址࿰…...
基于springboot+vue的墙绘产品展示交易平台系统(前后端分离)
博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 研究背景…...
网络原理-初识(1)
目录 网络发展史 独立模式 网络互连 局域网LAN 广域网WAN 网络通信基础 IP地址 概念 格式 端口 概念 格式 认识协议 概念 作用 五元组 网络发展史 独立模式 独立模式:计算机之间相互独立; 网络互连 随着时代的发展,越来越需要计算机之间相互通信,共享软件和数…...
【GitHub项目推荐--人脸识别】【转载】
01 带有移动应用程序的人脸识别库 OpenFace 作为用于人脸识别的通用库,能够实现瞬态和移动人脸识别,目前在 GitHub 上斩获 14291 Star。以下为 LFW 数据集 Sylvestor Stallone 输入单个图像的流程。 项目地址:https://github.com/cmusatya…...
NLP自然语言处理介绍
自然语言处理(NLP,Natural Language Processing)是一门涉及计算机与人类语言之间交互的学科。它的目标是使计算机能够理解和生成人类语言,从而更好地处理和解析大量的文本数据。NLP不仅是人工智能领域中一个重要的分支,…...
在线WebOffce在HTML/VUE/Electron纯前端网页编辑Office之打开Word后自动处于修订模式
在线办公协同办公过程中,对于老板给出的文档修改,如果在错别字方面都要自己一个个字去看的话也太浪费时间了,其实word上就有一个修订模式,可以帮助大家高效完成文档的修改,在线WebOffce在HTML/VUE/Electron纯前端网页编…...
thinkphp+vue+mysql旅游推荐攻略分享网站p0667
基于php语言设计并实现了旅游分享网站。该系统基于B/S即所谓浏览器/服务器模式,应用thinkphp框架,选择MySQL作为后台数据库。系统主要包括用户、景点信息、攻略分类、旅游攻略、门票购买、留言反馈、论坛管理、系统管理等功能模块。运行环境:phpstudy/wa…...
华为系统底层是用Java写的吗?和安卓的区别?
HarmonyOS(鸿蒙操作系统)是华为自主开发的分布式操作系统。下面是对HarmonyOS底层的详细介绍: 微内核架构:HarmonyOS采用了微内核架构,将核心服务和功能放在微内核中,而将其他应用服务放在用户空间中。这种…...
sql server 修改表前 先判断是否有这个列
IF NOT EXISTS (SELECT 1 FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME Users AND COLUMN_NAME userNum) BEGINALTER TABLE UsersADD userNum INT; END 在这个示例中: TABLE_NAME Users 表示我们正在检查Users这张表。COLUMN_NAME userNum 表示我们在查…...
解决网站高并发问题的策略?
解决网站高并发问题的策略 1.应用和数据服务分离:通过将应用和数据服务分离,可以降低数据库的负载压力,提高系统的可扩展性和稳定性。这种策略有助于提高系统的并发处理能力,满足大量用户的需求。 2.使用缓存技术:通过…...
浙政钉实现埋点(浙政钉-H5小程序应用采集开发手册)
浙政钉-H5&小程序应用采集开发手册 埋点代码分为:稳定性监控代码(Emas)和流量分析代码(A+)。稳定性监控代码(Emas)只需要在首页加入。流量分析代码(A+)每个页面都需要加入,但是可以写通用js,在其他页面引入。 适用范围 本文档适用于浙政钉业务web(H5)或小程序应…...
【笔记】Helm-4 最佳实践-3 模板
模板 最佳实践指南的这部分聚焦于模板。 templates/结构 template/目录结构应该如下: 1、如果生成YAML输出。模板文件应该有扩展名.yaml。扩展名是.tpl可用于生成非格式化内容的模板文件。 2、模板文件名称应该使用横杠符号(my-example-configmap.yam…...
网络爬虫基本原理的介绍
网络爬虫,也称为网络蜘蛛,是互联网浏览中的一种自动化程序,主要用于抓取并下载互联网上的网页信息。对于大部分搜索引擎,网络爬虫是其核心组件,用于构建和更新网页的索引。这篇博客将详细介绍网络爬虫的基本原理。 一…...
Qt配置OpenCV
首先安装好Qt Createor,CMake,OpenCV,我本次使用的是Qt6.3.4和OpenCV4.6.0 Qt Creator清华镜像源:https://mirrors.tuna.tsinghua.edu.cn/qt/official_releases/qtcreator/OpenCV官网下载: https://opencv.org/releases/ 一. 编译OpenCV 首先使用Qt C…...
单片机I/O口驱动MOS管
自记录: 看完本章,串起来看,看mos驱动电路这篇:MOS管驱动电流计算以及分立器件驱动电路-CSDN博客 使用单片机做一个PLC,输出可如下两种情况: 单片机I/O口驱动,为什么一般都选用三极管而不是MOS管…...
k8s---helm
Helm是什么? 在没有helm之前。部署一个服务,需要deployment、service、ingress、挂在卷等等相关配置都需要人工来配置。 helm的作用就是通过打包的方式,把需要人工编写的配置集成在一起。是一键式的部署服务。类似于yum功能。 由官方提供的…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 :主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 :确保数据的完整性,便于数据的查询和管理。 示例 :在学生信息表中,学号可以作为主键ÿ…...
深度解析:etcd 在 Milvus 向量数据库中的关键作用
目录 🚀 深度解析:etcd 在 Milvus 向量数据库中的关键作用 💡 什么是 etcd? 🧠 Milvus 架构简介 📦 etcd 在 Milvus 中的核心作用 🔧 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...
MySQL基本操作(续)
第3章:MySQL基本操作(续) 3.3 表操作 表是关系型数据库中存储数据的基本结构,由行和列组成。在MySQL中,表操作包括创建表、查看表结构、修改表和删除表等。本节将详细介绍这些操作。 3.3.1 创建表 在MySQL中&#…...
Redis——Cluster配置
目录 分片 一、分片的本质与核心价值 二、分片实现方案对比 三、分片算法详解 1. 范围分片(顺序分片) 2. 哈希分片 3. 虚拟槽分片(Redis Cluster 方案) 四、Redis Cluster 分片实践要点 五、经典问题解析 C…...
