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;
}


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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

WebLOAD: 一站式性能测试工具

WebLOAD 是一款一站式前端性能测试工具,对测试人员来说使用非常方便。 它可以帮助前端工程师和测试快速对网页进行性能测试和优化,提高网页加载速度,减少页面卡顿和闪烁。 WebLOAD的特点、使用指南以及企业实际使用中的案列。 WebLOAD的特…

Nessus扫描结果出现在TE.IO或者ES容器结果查看问题解决方案

Nessus扫描结果出现在TE.IO或者ES容器结果查看问题解决方案 也是昨天晚上折腾了一个晚上到凌晨四点多,实在没有头绪,在论坛,贴吧,各种求助查贴,没有什么人解决.后面请教了一个安全圈的大佬朋友给解决了. 我的问题是在kali上的,所以只写了kali 的解决方案: 修改插件: vim /opt/…

零代码编程:用ChatGPT将SRT字幕文件批量转为Word文本文档

一个文件夹中有多个srt视频字幕文件,srt文件里面有很多时间轴: 现在想将其批量转为word文档,去掉里面与字符无关的时间轴,在ChatGPT中输入提示词: 你是一个Python编程专家,要完成一个批量将SRT字幕文件转为…

R语言:利用biomod2进行生态位建模

在这里主要是分享一个不错的代码,喜欢的可以慢慢研究。我看了一遍,觉得里面有很多有意思的东西,供大家学习和参考。 利用PCA轴总结的70个环境变量,利用biomod2进行生态位建模: #------------------------------------…

【计算机网络学习之路】UDP socket编程

文章目录 前言一. 网络通信本质端口号TCP与UDP网络字节序 二. socket编程接口socket()和sockaddr结构体 三. 简单echo服务结束语 前言 本系列文章是计算机网络学习的笔记,欢迎大佬们阅读,纠错,分享相关知识。希望可以与你共同进步。 一. 网…

安卓:Android Studio4.0~2023中正确的打开Android Device Monitor

Android Studio4.0~2023 中如何正确的打开Android Device Monitor(亲测有效) 前些天买了新电脑,安装了新版本的Android Studio4.0想试一试,结果就出现了一些问题。 问题引出: Android Device Monitor在工具栏中找不到,后来上网查…

基于nbiot的矿车追踪定位系统(论文+源码)

1.系统设计 鉴于智能物联网的大趋势,本次基于窄带物联网的矿车追踪定位系统应具备以下功能: (1)实现实时定位,真正实现矿车随时随地定位; (2)定位精度高,采用该系统可以实现矿车在…

dump备份命令

dump备份文件系统,或者目录 文件系统有等级划分,0为全部备份,1.针对上一次有变动的文件进行备份,以此类崔 目录备份:只有一个等级0, 针对文件系统类型有要求ext2,ext3,如果是其他…

数据分析基础之《jupyter notebook工具》

一、安装库 1、linux库 yum install python3-devel 2、python库 pip3 install -U matplotlib pip3 install -U numpy pip3 install -U pandas pip3 install -U TA-Lib pip3 install -U tables pip3 install -U notebook 3、如果TA-Lib安装不上,先手动安装依赖库 …

Servlet---上传文件

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

transformer学习资料

一、NLP 自然语言处理 NLP 是机器学习在语言学领域的研究&#xff0c;专注于理解与人类语言相关的一切。NLP 的目标不仅是要理解每个单独的单词含义&#xff0c;而且也要理解这些单词与之相关联的上下文之间的意思。 常见的NLP 任务列表&#xff1a; 对整句的分类&#xff1…

【C/PTA】函数专项练习(一)

本文结合PTA专项练习带领读者掌握函数&#xff0c;刷题为主注释为辅&#xff0c;在代码中理解思路&#xff0c;其它不做过多叙述。 目录 6-1 输出星期名6-2 三整数最大值6-3 数据排序6-4 多项式求值 6-1 输出星期名 请编写函数&#xff0c;根据星期数输出对应的星期名。 函数原…

xss漏洞挖掘

xss漏洞挖掘 以xss-challenge第二关为例 输入123 查看网页源代码 发现value值原样返回 手动挖掘 此处发现尖括号和双引号闭合完整&#xff0c;因此可以直接使用<script>alert(/xss/)</script>测试 发现提交过后标签内容被双引号闭合进去了 因此此处需要将标签…

CAS还能这样理解??

1.CAS全称 全称&#xff1a;compare and swap&#xff0c;比较并交换。 虽然翻译过来是[比较并交换]&#xff0c;但它是一个原子性的操作&#xff0c;对应到CPU指令为cmpxchg。 2.通俗理解CAS CAS 有三个操作数:当前值A、内存值V、要修改的新值B。假设 当前值A 跟 内存值V 相…

高并发分布式架构的演进之路

目录 单体架构 应用数据分离架构 应用数据集群架构 读写分离 / 主从分离架构 引⼊缓存⸺冷热分离架构 垂直分库 业务拆分-微服务 单体架构 一个系统初期&#xff0c;我们需要利⽤我们精⼲的技术团队&#xff0c;快速将业务系统投⼊市场进⾏检验&#xff0c;并且可以迅速…

前端uniapp生成海报绘制canvas画布并且保存到相册【实战/带源码/最新】

目录 插件市场效果如下图注意使用my-share.vue插件文件如下图片hch-posterutilsindex.js draw-demo.vuehch-poster.vue 最后 插件市场 插件市场 效果如下图 注意 主要&#xff1a;使用my-share.vue和绘制canvas的hch-poster.vue这两个使用 使用my-share.vue <template&…

通过css设置元素隐藏和显示

背景&#xff1a;鼠标悬浮时显示删除&#xff0c;放开后显示组件名 解决&#xff1a;通过display:none和display:block显示和隐藏元素&#xff1b; 使用 div p选择器选择当前div的下一个紧跟的p元素 <div v-if"!preview" class"name">{{propertyDa…

java每日一记 —— 浅浅的说下在Lombok中遇到的一个坑

今天说下Lombok 1.先谈谈Lombok吧2.来聊聊为什么有些公司不喜欢用Lombok3.聊点废话 本篇代码在jdk11中测试通过&#xff0c;Lombok版本使用的是1.18.20 昨天写注解时提到了一下Lombok&#xff0c;然而最近写毕业论文又因为Lombok踩过几次坑&#xff0c;所以今天来聊聊 1.先谈谈…

windows10关闭自动更新

windows10关闭自动更新 下载策略组改配置组配置 下载策略组 我自己的电脑里没有这个文件gpedit.msc所以要下载 pushd "%~dp0"dir /b C:\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientExtensions-Package~3*.mum >List.txtdir /b C:\Windows…