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

2023-11-23 10:45

本文主要是介绍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;
}

这篇关于css animation 动画如何保留动画结束后的状态 animation-fill-mode: forwards的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/417381

相关文章

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②