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

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实现

需求&#xff0c;我正常的菜单功能有隐藏与显示功能&#xff0c;需要增加动画 打开的时候宽度从0到300&#xff0c;关闭的时候&#xff0c;宽度从300到0 <template> <div id"app"> <button click"toggleLength">Toggle Length</bu…...

书生·浦语大模型实战营-学习笔记5

LMDeploy 大模型量化部署实践 大模型部署背景 LMDeploy简介 轻量化、推理引擎、服务 核心功能-量化 显存消耗变少了 大语言模型是典型的访存密集型任务&#xff0c;因为它是decoder-by-decoder 先把数据量化为INT4存起来&#xff0c;算的时候会反量化为FP16 AWQ算法&a…...

10. Profile

1. 区分环境的配置 1.1. properties 配置 假设&#xff0c;一个应用的工作环境有&#xff1a;dev、test、prod 那么&#xff0c;我们可以添加 4 个配置文件&#xff1a; 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部署了多个实例&#xff0c;如图&#xff1a; 大家思考几个问题&#xff1a; order-service在发起远程调用的时候&#xff0c;该如何得知user-service实例的ip地址和端口&#xff1f;有多个user-service实例地址&#xff0…...

基于springboot+vue的墙绘产品展示交易平台系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 研究背景…...

网络原理-初识(1)

目录 网络发展史 独立模式 网络互连 局域网LAN 广域网WAN 网络通信基础 IP地址 概念 格式 端口 概念 格式 认识协议 概念 作用 五元组 网络发展史 独立模式 独立模式:计算机之间相互独立; 网络互连 随着时代的发展,越来越需要计算机之间相互通信,共享软件和数…...

【GitHub项目推荐--人脸识别】【转载】

01 带有移动应用程序的人脸识别库 OpenFace 作为用于人脸识别的通用库&#xff0c;能够实现瞬态和移动人脸识别&#xff0c;目前在 GitHub 上斩获 14291 Star。以下为 LFW 数据集 Sylvestor Stallone 输入单个图像的流程。 项目地址&#xff1a;https://github.com/cmusatya…...

NLP自然语言处理介绍

自然语言处理&#xff08;NLP&#xff0c;Natural Language Processing&#xff09;是一门涉及计算机与人类语言之间交互的学科。它的目标是使计算机能够理解和生成人类语言&#xff0c;从而更好地处理和解析大量的文本数据。NLP不仅是人工智能领域中一个重要的分支&#xff0c…...

在线WebOffce在HTML/VUE/Electron纯前端网页编辑Office之打开Word后自动处于修订模式

在线办公协同办公过程中&#xff0c;对于老板给出的文档修改&#xff0c;如果在错别字方面都要自己一个个字去看的话也太浪费时间了&#xff0c;其实word上就有一个修订模式&#xff0c;可以帮助大家高效完成文档的修改&#xff0c;在线WebOffce在HTML/VUE/Electron纯前端网页编…...

thinkphp+vue+mysql旅游推荐攻略分享网站p0667

基于php语言设计并实现了旅游分享网站。该系统基于B/S即所谓浏览器/服务器模式&#xff0c;应用thinkphp框架&#xff0c;选择MySQL作为后台数据库。系统主要包括用户、景点信息、攻略分类、旅游攻略、门票购买、留言反馈、论坛管理、系统管理等功能模块。运行环境:phpstudy/wa…...

华为系统底层是用Java写的吗?和安卓的区别?

HarmonyOS&#xff08;鸿蒙操作系统&#xff09;是华为自主开发的分布式操作系统。下面是对HarmonyOS底层的详细介绍&#xff1a; 微内核架构&#xff1a;HarmonyOS采用了微内核架构&#xff0c;将核心服务和功能放在微内核中&#xff0c;而将其他应用服务放在用户空间中。这种…...

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 在这个示例中&#xff1a; TABLE_NAME Users 表示我们正在检查Users这张表。COLUMN_NAME userNum 表示我们在查…...

解决网站高并发问题的策略?

解决网站高并发问题的策略 1.应用和数据服务分离&#xff1a;通过将应用和数据服务分离&#xff0c;可以降低数据库的负载压力&#xff0c;提高系统的可扩展性和稳定性。这种策略有助于提高系统的并发处理能力&#xff0c;满足大量用户的需求。 2.使用缓存技术&#xff1a;通过…...

浙政钉实现埋点(浙政钉-H5小程序应用采集开发手册)

浙政钉-H5&小程序应用采集开发手册 埋点代码分为:稳定性监控代码(Emas)和流量分析代码(A+)。稳定性监控代码(Emas)只需要在首页加入。流量分析代码(A+)每个页面都需要加入,但是可以写通用js,在其他页面引入。 适用范围 本文档适用于浙政钉业务web(H5)或小程序应…...

【笔记】Helm-4 最佳实践-3 模板

模板 最佳实践指南的这部分聚焦于模板。 templates/结构 template/目录结构应该如下&#xff1a; 1、如果生成YAML输出。模板文件应该有扩展名.yaml。扩展名是.tpl可用于生成非格式化内容的模板文件。 2、模板文件名称应该使用横杠符号&#xff08;my-example-configmap.yam…...

网络爬虫基本原理的介绍

网络爬虫&#xff0c;也称为网络蜘蛛&#xff0c;是互联网浏览中的一种自动化程序&#xff0c;主要用于抓取并下载互联网上的网页信息。对于大部分搜索引擎&#xff0c;网络爬虫是其核心组件&#xff0c;用于构建和更新网页的索引。这篇博客将详细介绍网络爬虫的基本原理。 一…...

Qt配置OpenCV

首先安装好Qt Createor&#xff0c;CMake&#xff0c;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管

自记录&#xff1a; 看完本章&#xff0c;串起来看&#xff0c;看mos驱动电路这篇&#xff1a;MOS管驱动电流计算以及分立器件驱动电路-CSDN博客 使用单片机做一个PLC,输出可如下两种情况&#xff1a; 单片机I/O口驱动&#xff0c;为什么一般都选用三极管而不是MOS管&#xf…...

k8s---helm

Helm是什么&#xff1f; 在没有helm之前。部署一个服务&#xff0c;需要deployment、service、ingress、挂在卷等等相关配置都需要人工来配置。 helm的作用就是通过打包的方式&#xff0c;把需要人工编写的配置集成在一起。是一键式的部署服务。类似于yum功能。 由官方提供的…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...