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

js+css实现简单的弹框动画

news 2025/11/8 20:59:39

效果图

只是一个简单的演示demo，但是可以后面可以优化样式啥的

在这里插入图片描述

  • 刚开始元素的display为none，然后，为了给元素展示时添加一个动画，首先要添加样式类名show，让它覆盖display:none，变得可见。然后，添加元素放大的动画样式类名
  • 隐藏的时候，也需要有动画，并且动画结束完成之后，元素的display应当恢复成原来的none，也就是变得不可见。因此，需要监听动画完成事件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* body占满整个页面 */body {margin: 0;height: 100vh;}/* 设置box1默认大小，以及设置 display:none，让它一开始就不被看见 */.box1 {width: 400px;height: 200px;background-color: #bfa;margin: 10px auto;display: none;}/* 定义元素放大的动画 */@keyframes scaleup {0% {transform: scale(0)}100% {transform: scale(1)}}/* 定义元素放大的类 */.scaleup {animation: scaleup 0.5s;}/* 元素如果要显示, 必须通过添加该类的方式(约定) */.show {display: block;}/* 元素缩小的动画 */@keyframes scaledown {0% {transform: scale(1)}100% {transform: scale(0)}}/* 定义元素缩小的类 */.scaledown {animation: scaledown 0.5s;}</style><script>window.onload = () => {let box1 = document.querySelector('.box1')let openBtn = document.querySelector('.open')let closeBtn = document.querySelector('.close')openBtn.onclick = () => {if(box1.show) {/* 用于标记box1是否被打开过, 如果之前被打开过的话, 再次点击打开无效 */return }box1.show = true /* 标记打开过 */box1.classList.add('show')   /* 添加让元素显示的类 */box1.classList.add('scaleup')/* 添加元素显示时的动画 */let callback  = () => {box1.classList.remove('scaleup') /* 动画完成后, 移除放大动画的类；为什么要移除呢？动画播放结束，这个类也就没用了，并且让下次可以继续指定放大的动画的样式类,来展示动画 */box1.removeEventListener('animationend',callback) /* 动画完成后, 移除监听 */}box1.addEventListener('animationend', callback) /* 动画完成后, 执行指定的函数 */}closeBtn.onclick = () => {if(!box1.show) {return}box1.classList.add('scaledown') /* 关闭时, 指定缩小的动画的样式类 *//* 缩小动画结束后, 应当要把这个框给隐藏掉, 就是把box1的display恢复成原来的none */let callback  = () => {box1.classList.remove('show') /* 把show样式类去掉，就会用到box1类中的display:none了 */box1.classList.remove('scaledown') /* 跟上面的解释一样 */box1.removeEventListener('animationend',callback) /* 动画完成后, 移除监听 */box1.show = false}box1.addEventListener('animationend', callback) /* 动画完成后, 执行指定的函数 */}}</script>
</head>
<body><div class="container"><div class="box1 scaleup"></div></div><hr/><button class="open">open</button><button class="close">close</button>
</body>
</html>

相关文章：

js+css实现简单的弹框动画

效果图 只是一个简单的演示demo&#xff0c;但是可以后面可以优化样式啥的 刚开始元素的display为none&#xff0c;然后&#xff0c;为了给元素展示时添加一个动画&#xff0c;首先要添加样式类名show&#xff0c;让它覆盖display:none&#xff0c;变得可见。然后&#xff0c;添…...

编程日记 2023/4/26 12:18:01

真题详解(UML图)-软件设计（五十五)

真题详解&#xff08;计算机知识&#xff09;-软件设计&#xff08;五十四)https://blog.csdn.net/ke1ying/article/details/130278265 组织域名&#xff1a; com商业组织 edu教育组织 gov政府组织 net主要网络支持中心 mil军事部门 Int国际组织 2、时间复杂度 O&#…...

编程日记 2023/4/26 12:13:00

基于html+css的图展示42

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…...

编程日记 2023/5/31 19:44:08

MyBatis系列-入门篇

MyBatis入门 一&#xff1a;故事背景二&#xff1a;MyBatis 简介2.1什么是MyBatis2.1 MyBatis有什么好处 三&#xff1a;MyBatis 入门3.1使用SpringBoot集成MyBatis3.1.1 添加依赖3.1.2 配置数据源3.1.3 配置MyBatis3.1.4 创建Mapper接口和SQL映射文件3.1.5 注入Mapper接口 3.2…...

编程日记 2023/4/26 12:02:57

科学防雷接地和雷电防护方案

说到防雷&#xff0c;可能不少人首先会想到避雷针&#xff0c;而“避雷针”这一概念&#xff0c;很容易让大家对防雷的概念造成误解。 误解1: 避雷针是用来“避雷”的。 其实&#xff0c;避雷针的学名叫“接闪器”&#xff0c;不是用来“避开雷击”的&#xff0c;而是用来“迎…...

编程日记 2023/5/31 15:33:50

SpringMVC-RESTful架构风格

目录 RESTful架构风格 1、RESTful概述 2、RESTful的六大原则 3、RESTful的实现 4、HiddenHttpMethodFilter RESTful风格的CRUD 1、环境搭建 2、功能需求 3、功能&#xff1a;访问首页 4、功能&#xff1a;查询所有数据 5、功能&#xff1a;删除一条数据 6、功能&…...

编程日记 2023/4/26 11:52:55

consistency-starter

使用说明 建议在B端使用,不推荐C端使用 功能 事务提交之后推送MQ a. 当一个程序中有多个MQ需要推送时,可以在事务内任意位置调用发送MQ方法,而不会因为程序报错而导致数据不一致问题.事务提交之后发起子线程执行异步任务程序中灵活指定时间执行子任务 a. 例如:业务要求执行A业…...

编程日记 2023/4/26 11:47:53

【Json】Spring Boot整合Json与Json数组

Spring Boot整合Json与Json数组 文章目录 Spring Boot整合Json与Json数组一&#xff0c;引入依赖二&#xff0c;常见Json数据格式-2.1 Json格式-2.2 数组格式-2.3 Json数组格式 三&#xff0c;在Java中如何使用-3.1 Json格式-3.2 数组格式-3.3 Json数组格式 四&#xff0c;Json…...

编程日记 2023/4/26 11:42:51

Adobe Photoshop 软件下载

Adobe Photoshop&#xff0c;简称“PS”&#xff0c;是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。 时至今日&#xff0c;Adobe Photoshop 已经成为当今世界上最流行、应用最广泛的图像处理软件。不但设计专业的学生要系统的学习这个…...

编程日记 2023/4/26 11:37:50

[ES6]解构与赋值

[ES6]解构与赋值 解构模型对象属性解构函数参数解构字符串的解构数组解构REST 运算符参与的解构--...数组解构属性解构 解构的赋值 解构赋值是对赋值运算符的扩展。 通过解构&#xff0c;可以更加简单的获取复杂对象的属性 解构模型 解构的源&#xff0c;解构赋值表达式的右…...

编程日记 2023/4/26 11:32:48

2023年3月 青少年软件编程（C语言） 等级考试试卷（五级）

1. 拼点游戏 C和S两位同学一起玩拼点游戏。有一堆白色卡牌和一堆蓝色卡牌&#xff0c;每张卡牌上写了一个整数点数。C随机抽取n张白色卡牌&#xff0c;S随机抽取n张蓝色卡牌&#xff0c;他们进行n回合拼点&#xff0c;每次两人各出一张卡牌&#xff0c;点数大者获得三颗巧克力&…...

编程日记 2023/4/26 11:27:47

Unity之ShaderGraph入门

前言 随着Unity版本的不断升级&#xff0c;URP&#xff08;可编程渲染管线&#xff09;也越来越普及了。不管是从效果还是性能&#xff0c;都是吊打老版的build-in-shader。所以无论如何我们都要开始 拥抱URP&#xff0c;升级Unity的时候到了。 引擎版本 我这里选择了Unity …...

编程日记 2023/4/26 11:22:46

Spring-学习修改尚硅谷最新教程笔记

二、Spring 1、Spring简介 1.1、Spring概述 官网地址&#xff1a;https://spring.io/ Spring 是最受欢迎的企业级 Java 应用程序开发框架&#xff0c;数以百万的来自世界各地的开发人员使用 Spring 框架来创建性能好、易于测试、可重用的代码。 Spring 框架是一个开源的 Jav…...

编程日记 2023/4/26 11:17:44

CPU寄存器的分类与Intel 8086 的eax,ebx,ecx,edx

目录 一、CPU中的寄存器分类 1.用户可见寄存器 2.控制和状态寄存器 一、CPU中的寄存器分类 大致分为两类: 一类属于用户可见寄存器&#xff0c;对这类寄存器编程&#xff0c;以及通过优化使CPU因使用这类寄存器&#xff0c;而减少对主存的访问次数&#xff0c; 另一类属于控…...

编程日记 2023/4/26 11:12:43

如何快速上手Vue框架?

编译软件&#xff1a;IntelliJ IDEA 2019.2.4 x64 运行环境&#xff1a;Google浏览器 Vue框架版本&#xff1a;Vue.js v2.7.14 目录 一. 框架是什么&#xff1f;二. 怎么写一个Vue程序&#xff08;以IDEA举例&#xff09;&#xff1f;三. 什么是声明式渲染?3.1 声明式3.2 渲染…...

编程日记 2023/5/30 3:14:37

Android进阶宝典—App响应时间优化

响应时间&#xff0c;它是用来衡量系统运行效率的一个重要指标。评价一个应用的响应时间&#xff0c;可以从用户感知和系统性能这两个角度来考量。 响应时间的长短&#xff0c;可能影响用户对某个功能、某个应用、乃至某个系统的使用。毕竟如果有选择&#xff0c;没有哪个人会愿…...

编程日记 2023/5/30 10:47:36

100天涨薪4k，从功能测试到自动化测试，我整理的3000字超全学习指南

去年6月份&#xff0c;由于经济压力让我下定决心进阶自动化测试&#xff0c;已经24的我做了3年功能测试&#xff0c;坐标广州薪资定格在8k&#xff0c;可能是生活过的太安逸&#xff0c;觉得8000的工资也够了&#xff0c;但是生活总是多变的&#xff0c;女朋友的突然怀孕&#…...

编程日记 2023/4/26 10:57:39

Pytorch剪枝api测试和结果

Pytorch 官方给出的prune接口 下面是基于prune的接口进行剪枝的方法步骤 1、首先prune接口在 torch.nn.utils.prune中&#xff0c;目前支持的剪枝方法有&#xff1a; RandomUnstructuredL1UnstructuredRandomStructuredLnStructuredCustomFromMask ps&#xff1a;非结构性剪…...

编程日记 2023/4/26 10:52:38

微服务下网关聚合Swagger文档、starter统一配置Swagger

一、starter实现统一配置微服务文档 把Swagger配置中的公共部分抽取出来Swagger与SpringBoot整合中&#xff0c;可能会由于版本问题出现各种问题 1、制作starter 参考&#xff1a; 【SpringBoot】自定义启动器 Starter【保姆级教程】用starter实现Oauth2中资源服务的统一配置用…...

编程日记 2023/4/26 10:47:36

剑指 Offer第二版：机器人的运动范围、正则表达式匹配、表示数值的字符串

剑指 Offer第二版 13. 机器人的运动范围19. 正则表达式匹配20. 表示数值的字符串 13. 机器人的运动范围 题目&#xff1a;地上有一个m行n列的方格&#xff0c;从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动&#xff0c;它每次可以向左、右、上、下移…...

编程日记 2023/4/26 10:42:35

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/11/7 14:08:13

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/11/7 19:17:39

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/11/7 20:04:06

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/11/7 20:04:50

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/11/8 3:16:06

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/10/28 1:35:57

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/11/8 7:31:37

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/11/8 9:45:35