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

news/2024/4/24 23:45:04/

效果图

只是一个简单的演示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>

http://www.ppmy.cn/news/47664.html

相关文章

docker+jenkins+maven+git构建聚合项目,实现自动化部署,走了800个坑

流程 主要的逻辑就是Docker上安装jenkins&#xff0c;然后拉取git上的代码&#xff0c;把git上的代码用Maven打包成jar包&#xff0c;然后在docker运行 这个流程上的难点 一个是聚合项目有可能Maven install的时候失败。 解决办法&#xff1a;在基础模块的pom文件上添加 <…

【数据结构】堆的应用(堆排序的实现 + (向上/向下)建堆时间复杂度证明 + TopK问题(笔记总结))

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;数据结构 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&…

Flink Table API 和 Flink-SQL使用详解

Flink Table API 和 Flink-SQL使用详解 1.Table API & Flink SQL-核心概念 ​ Apache Flink 有两种关系型 API 来做流批统一处理&#xff1a; Table API Table API 是用于 Scala 和 Java 语言的查询API&#xff0c;它可以用一种非常直观的方式来组合使用选取、过滤、join…

RK3568平台开发系列讲解(调试篇)IS_ERR函数的使用

🚀返回专栏总目录 文章目录 一、IS_ERR函数用法二、IS_ERR函数三、内核错误码沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇将介绍 IS_ERR 函数的使用。 一、IS_ERR函数用法 先看下用法: 二、IS_ERR函数 对于任何一个指针来说,必然存在三种情况: 一种是合…

电源常识-PCB材质防火等级焊锡工艺

1、目前主流的PCB材质分类主要有以下几种,如图1&#xff0c;图2&#xff0c;图3。FR-4材质比CEM-1好&#xff0c;CEM-1比FR-1好。 按结构分为单面板&#xff0c;双面板&#xff0c;多层板。单面板就是单面铺铜走线&#xff0c;双面板就是上下两面都可以铺铜走线&#xff0c;多层…

Guns社区医疗项目

又是一年毕业季&#xff0c;计算机专业大四的同学们要接受毕业设计的考验啦。又有多少同学为了毕业设计而愁眉苦脸&#xff0c;心力憔悴。考虑到这些&#xff0c;这里为同学们分享一个适合你们毕业设计的作品以及详细介绍&#xff0c;让正在焦头烂额的同学们有所启发&#xff0…

asp.net+C#房地产销售系统文献综述和开题报告+Lw

本系统使用了B/S模式&#xff0c;使用ASP.NET语言和SQL Server来设计开发的。首先把所有人分为了用户和管理员2个部分&#xff0c;一般的用户可以对系统的前台进行访问&#xff0c;对一般的信息进行查看&#xff0c;而注册用户就可以通过登录来完成对房屋信息的查看和对房屋的…

开发插件JFormDesigner(可视化GUI编程)的使用与注册-简单几步即可完成

开发插件JFormDesigner&#xff08;可视化GUI编程&#xff09;的使用与注册 获取链接&#xff1a;1.JFormDesigner获取2.记录插件下载路径3.使用zcj注册4.生成license5.打开idea进行注册 获取链接&#xff1a; https://pan.baidu.com/s/1N9ua2p3BpiMIARCEewRxIw?pwd4e9a 提取…

浅说情绪控制被杏仁体劫持

2023年4月16号&#xff0c;没想到被杏仁体劫持那么严重&#xff0c;触发手抖和口干的症状&#xff0c;这个还真是自己完全没有意识到的【这就是焦虑固化的记忆会持续化】。 【修行】人生要修炼两条线&#xff1a;一条明线是做的事情&#xff0c;那是自己要做的具体事情。 一条…

天梯赛 L2-034 口罩发放

原题链接&#xff1a; PTA | 程序设计类实验辅助教学平台 题目描述&#xff1a; 为了抗击来势汹汹的 COVID19 新型冠状病毒&#xff0c;全国各地均启动了各项措施控制疫情发展&#xff0c;其中一个重要的环节是口罩的发放。 某市出于给市民发放口罩的需要&#xff0c;推出了…

python-day6(补充三:实例变量和函数)

实例变量和函数 实例函数的定义认识__init__函数定义实例变量实例函数中访问实例变量外部访问实例变量与函数 实例函数的定义 定义实例函数 class Student:def say_hello(self, msg):print(f"hello{msg}")实例函数属于对象 class Student:def say_hello(self, m…

JMM之volatile关键字详解

1、概要 在JMM规范下有三大特性分别是&#xff1a;可见性、原子性、有序性。而被volatile关键字修饰的共享变量拥有三大特性的两大特性分别是&#xff1a;可见性和有序性。 为什么被volatile修饰的变量就可以保证变量的可见性和有序性呢&#xff1f;为啥不能保证原子性&#…

使用 PyTorch Geometric 和 GCTConv实现异构图、二部图上的节点分类或者链路预测

解决问题描述 使用 PyTorch Geometric 和 Heterogeneous Graph Transformer 实现异构图上的节点分类 在二部图上应用GTN算法(使用torch_geometric的库HGTConv)&#xff1b; 步骤解释 导入所需的 PyTorch 和 PyTorch Geometric 库。 定义 x1 和 x2 两种不同类型节点的特征&am…

如何在 TensorFlow 中使用 GPU 加速深度学习计算?

一、前言 TensorFlow 是由 Google 开源的深度学习框架,它具有易用、高效、灵活等特点,被广泛应用于学术界和工业界中。而 GPU 是一种高性能的计算设备,可以加速深度学习的计算过程。本文将介绍如何在 TensorFlow 中使用 GPU 加速深度学习计算。 二、安装 TensorFlow 安装…

Python语言中的注释方法应用

Python语言中的注释方法 在Python编程中&#xff0c;与其他编程语言一样&#xff0c;有良好的注释部分&#xff0c;会让你的程序在后续的改进或优化中&#xff0c;变得便利。同时&#xff0c;给自己培养了良好的编程习惯。 在Python语言中&#xff0c;有两种注释方法。 1.单行…

DAY 43 Apache的配置与应用

虚拟Web主机 概述 虚拟web主机指的是在同一台服务器中运行多个web站点&#xff0c;其中每一个站点实际上并不独立占用整个服务器&#xff0c;因此被称为"虚拟"web主机。通过虚拟web主机服务可以充分利用服务器的硬件资源&#xff0c;从而大大降低网站构建及运行成本…

API 接口主流协议有哪些? 如何创建不同协议?

API 接口协议繁多&#xff0c;不同的协议有着不同的使用场景。70% 互联网应用开发者日常仅会接触到最通用的 HTTP 协议&#xff0c;相信大家希望了解更多其他协议的信息。我们今天会给大家介绍各种 API 接口主流协议和他们之间的关系。 1、API 接口主流协议有哪些? 接口协议分…

理解websocket连接的原理

背景 Websocket是一个持久化的协议&#xff0c;相对于HTTP这种非持久的无状态协议来说 一、问题 http long poll&#xff0c;或者ajax轮询都可以实现实时信息传递&#xff0c;为什么还需要websocket&#xff1f; 二、理解 ajax轮询&#xff1a;浏览器隔个几秒就发送一次请求&am…

json for modern c++

目录 json for modern c概述编译问题问题描述问题解决 读取JSON文件demo json for modern c GitHub - nlohmann/json: JSON for Modern C 概述 json for modern c是一个德国大牛nlohmann写的&#xff0c;该版本的json有以下特点&#xff1a; 1.直观的语法。 2.整个代码由一个…

Spring项目创建与 Spring Bean 的存储与读取

目录 一、创建Spring项目 1.1 创建Maven项目 1.2 添加 Spring 框架依赖 1.3 添加启动类 二、Bean对象的创建与存储 2.1 创建Bean 2.2 将Bean注册到容器 2.3 获取并使用Bean对象 2.3.1 创建Spring上下文 2.3.2 从Spring容器中获取Bean对象​编辑 延申&#xff08;多种…