css animation 动画如何保留动画结束后的状态 animation-fill-mode: forwards

css animation 动画如何保留动画结束后的状态 animation-fill-mode: forwards

一、问题描述

在做一个弹窗动画提示的时候遇到了一个问题:
在动画结束的时候,移除元素时会有闪一下的问题,像这样:
在这里插入图片描述
我的动画结尾是这样的:

  from {-webkit-transform: translate3d(0, 0, 0) translateX(-50%);transform: translate3d(0, 0, 0) translateX(-50%);}to {visibility: hidden;opacity: 0;-webkit-transform: translate3d(0, -100%, 0) translateX(-50%);transform: translate3d(0, -100%, 0) translateX(-50%);}

可以看到结尾的时候已经是 hidden 的状态了,按理说应该不会再显示原来的状态。

二、原因和解决

其实这是里少了一个定义动画的属性,定义动画结束之后是保留动画后的状态,还是回到原来的状态,默认是恢复到原来的状态。
像上面这个例子,在动画结束的时候就立即恢复到原来可见的状态,js 来不及移除。用 js 卡点删除元素是无法实现很丝滑的效果的。

.slideOutUpPopMessage {-webkit-animation-name: slideOutUpPopMessage;animation-name: slideOutUpPopMessage;animation-fill-mode: forwards;
}

需要在动画的 class 上添加这样一个属性: animation-fill-mode ,意思是结束之后保留哪个状态。

forwars 就是保留动画结束后的状态,比如上面例子结束之后元素处于 hidden 的状态,这样即使没有用 js 移除这个元素,它也是不可见的。
这样在之后任意时间移除它就可以了。

在这里插入图片描述

三、完整 css

使用的时候:

  1. 元素提前放入 .animated .animated-fase
  2. 在显示的时候添加 .slideInDownPopMessage
  3. 元素显示之后删除 .slideInDownPopMessage
  4. 元素正常显示 n 秒,n 秒过后添加 .slideOutUpPopMessage
  5. 在元素消失之后再用 js 移除当前元素即可。
.animated{animation-duration: .51s;
}.animated-fast{animation-duration: .15s;
}@-webkit-keyframes slideInDownPopMessage {from {-webkit-transform: translate3d(0, -100%, 0) translateX(-50%);transform: translate3d(0, -100%, 0) translateX(-50%);visibility: visible;opacity: 0;}to {-webkit-transform: translate3d(0, 0, 0) translateX(-50%);transform: translate3d(0, 0, 0) translateX(-50%);visibility: visible;opacity: 1;}
}@keyframes slideInDownPopMessage {from {-webkit-transform: translate3d(0, -100%, 0) translateX(-50%);transform: translate3d(0, -100%, 0) translateX(-50%);visibility: visible;opacity: 0;}to {-webkit-transform: translate3d(0, 0, 0) translateX(-50%);transform: translate3d(0, 0, 0) translateX(-50%);visibility: visible;opacity: 1;}
}.slideInDownPopMessage {-webkit-animation-name: slideInDownPopMessage;animation-name: slideInDownPopMessage;
}@-webkit-keyframes slideOutUpPopMessage {from {-webkit-transform: translate3d(0, 0, 0) translateX(-50%);transform: translate3d(0, 0, 0) translateX(-50%);}to {visibility: hidden;opacity: 0;-webkit-transform: translate3d(0, -100%, 0) translateX(-50%);transform: translate3d(0, -100%, 0) translateX(-50%);}
}@keyframes slideOutUpPopMessage {from {-webkit-transform: translate3d(0, 0, 0) translateX(-50%);transform: translate3d(0, 0, 0) translateX(-50%);}to {visibility: hidden;opacity: 0;-webkit-transform: translate3d(0, -100%, 0) translateX(-50%);transform: translate3d(0, -100%, 0) translateX(-50%);}
}.slideOutUpPopMessage {-webkit-animation-name: slideOutUpPopMessage;animation-name: slideOutUpPopMessage;animation-fill-mode: forwards;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/150992.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LaTex生成引文(参考文献)时出现乱序,想把引文按顺序显示的解决方法

LaTex生成pdf时文献应用会乱序: 引用bib格式的参考文献时,会这么写: \bibliographystyle{plain} \bibliography{%filename%.bib} 而plain的意思是用作者的姓名排序,而不是按照引用顺序, 解决方案: 所以…

redis高级案列case

案列一 双写一致性 案例二 双锁策略 package com.redis.redis01.service;import com.redis.redis01.bean.RedisBs; import com.redis.redis01.mapper.RedisBsMapper; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; imp…

流体的压力

压力是流体力学中很重要的物理量,国际标准单位为 Pa(帕斯卡),其他常用单位包括 MPa(兆帕)、atm(标准大气压)、Torr(托) 等。 在流体内部,压力是标…

数据结构树与二叉树的实现

目录 一、普通树的存储结构 1、双亲表示法 2.孩子表示法 二、二叉树 1.二叉树的顺序存储(必须是完全二叉树,否则很浪费空间) 1)结构体 2.二叉树的链式存储 1)结构体 2)操作 1.创建一颗二叉树 2.创…

Linux内核mmap内存映射详解及例子实现

mmap在linux哪里? 什么是mmap? 上图说了,mmap是操作这些设备的一种方法,所谓操作设备,比如IO端口(点亮一个LED)、LCD控制器、磁盘控制器,实际上就是往设备的物理地址读写数据。 但…

【Zabbix监控二】之zabbix自定义监控内容案例(自动发现、自动注册)

一、自定义监控内容 案例:自定义监控客户端服务器登录的人数 需求:限制登录人数不超过3个人,超过5个人就发出报警 1、在客户端创建自定义key 明确需要执行的linux命令 创建zabbix监控项配置文件,用于自定义Key #在zabbix的配…

SMART PLC数值积分器功能块(矩形+梯形积分法完整源代码)

PLC的数值积分器算法也可以参考下面文章链接: PLC算法系列之数值积分器(Integrator)-CSDN博客文章浏览阅读1.5k次,点赞3次,收藏3次。数值积分和微分在工程上的重要意义不用多说,闭环控制的PID控制器就是积分和微分信号的应用。流量累加也会用到。有关积分运算在流量累加上…

算法-二叉树-简单-二叉树的遍历

记录一下算法题的学习6 首先我们要回忆一下怎么样遍历一个树: 三种遍历概念 先序遍历:先访问根节点,再访问左子树,最后访问右子树。 后序遍历:先左子树,再右子树,最后根节点。 中序遍历&…

kafka原理看这一篇就够了

为何使用消息队列 异步。接口方式实现多个系统协作,如图A系统作为用户请求接收方,需要调用多个系统的接口,这些接口还有可能是在A系统里同步调用,所以最后的接口耗时是多个系统接口耗时的总和;mq方式则可以异步发送消…

解决ubuntu23.10 wifi不能使用的问题

解决ubuntu23.10 wifi不能使用的问题 今天升级到了ubuntu23.10之后,wifi不能使用。 参考此视频解决了问题: https://www.youtube.com/watch?appdesktop&vn92O8rNKVb0 sudo lshw -class networkcd /etc/pm/sleep.dlssudo touch configsudo gedit co…

Java制作俄罗斯方块

Java俄罗斯方块小游戏 import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import java.util.ArrayList; import java.util.List; imp…

C#,怎么修改(VS)Visual Studio 2022支持的C#版本

一些文字来自于 Microsoft . (只需要读下面的红色文字即可!) 1 C# 语言版本控制 最新的 C# 编译器根据项目的一个或多个目标框架确定默认语言版本。 Visual Studio 不提供用于更改值的 UI,但可以通过编辑 .csproj 文件来更改值。…

1688阿里巴巴官方开放平台API接口获取商品详情、商品规格信息列表、价格、宝贝详情数据调用示例说明

商品详情API接口在电商平台和购物应用中的作用非常重要。它提供了获取商品详细信息的能力,帮助用户了解和选择合适的商品,同时也支持开发者进行竞品分析、市场研究和推广营销等工作,以提高用户体验和促进销售增长。 1688.item_get-获得1688商…

单链表的实现(Single Linked List)---直接拿下!

单链表的实现(Single Linked List)—直接拿下! 文章目录 单链表的实现(Single Linked List)---直接拿下!一、单链表的模型二、代码实现,接口函数实现①初始化②打印链表③创建一个结点④尾插⑤尾…

Unity 场景烘培 ——unity Post-Processing后处理1(四)

提示:文章有错误的地方,还望诸位大神不吝指教! 文章目录 前言一、Post-Processing是什么?二、安装使用Post-Processing1.安装Post-Processing2.使用Post-Processing(1).添加Post-process Volume&#xff08…

Flutter 3.16 中带来的更新

Flutter 3.16 中带来的更新 目 录 1. 概述2. 框架更新2.1 Material 3 成为新默认2.2 支持 Material 3 动画2.3 TextScaler2.4 SelectionArea 更新2.5 MatrixTransition 动画2.6 滚动更新2.7 在编辑菜单中添加附加选项2.8 PaintPattern 添加到 flutter_test 3. 引擎更新&#xf…

文件隐藏 [极客大挑战 2019]Secret File1

打开题目 查看源代码发现有一个可疑的php 访问一下看看 点一下secret 得到如下页面 响应时间太短我们根本看不清什么东西,那我们尝试bp抓包一下看看 提示有个secr3t.php 访问一下 得到 我们看见了flag.php 访问一下可是什么都没有 那我们就进行代码审计 $file$_…

Servlet---上传文件

文章目录 上传文件的方法上传文件的示例前端代码示例后端代码示例 上传文件的方法 上传文件的示例 前端代码示例 <body><form action"upload" method"post" enctype"multipart/form-data"><input type"file" name&qu…

2023年中国地产SaaS分类、产业链及市场规模分析[图]

SaaS是一种基于云计算技术&#xff0c;通过订阅的方式向互联网向客户提供访问权限以获取计算资源的一项软件即服务。地产SaaS则是SaaS的具体应用&#xff0c;提供了一个线上平台&#xff0c;用于协助房地产供应商与购房者、建筑承建商、材料供应商及房地产资产管理公司之间的协…

【Linux网络】详解使用http和ftp搭建yum仓库,以及yum网络源优化

目录 一、回顾yum的原理 1.1yum简介 yum安装的底层原理&#xff1a; yum的好处&#xff1a; 二、学习yum的配置文件及命令 1、yum的配置文件 2、yum的相关命令详解 3、yum的命令相关案例 三、搭建yum仓库的方式 1、本地yum仓库建立 2、通过http搭建内网的yum仓库 3、…