停止css @keyframes动画

解决方法来源
display重绘异步事件

场景:在做一个基于Vue ElementUI后台系统页面loading的时候,遇到了给v-loading加动画,却会阻塞v-loading结束自动display: none的问题,导致必须等动画时长走完,蒙层才none,才可以点击页面。

机制:由于display:none会引起页面的重绘事件,所以它是一个异步的延时事件,所以浏览器其实会先解析animate的代码,然后再执行display:none。

代码如下,必须加入 animation: none !important 停止动画,否则会有'阻塞'效果。还有一种暂停动画的方法,试过没起作用 animation-play-state: paused; 。

css 复制代码
.el-loading-mask {
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(3px);
  background-image: url("../assets/images/XOsX.gif");
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  animation: comeup 10s infinite; // 动画
  .el-loading-spinner {
    display: none !important
  }
}
.el-loading-fade-leave-active{
  animation: none !important; // 删除动画(解决动画时长阻塞display:none问题)
}
@keyframes comeup {
  0%{background-size: 80px 80px;}
  90%{background-size: 210px 210px;}
  100%{background-size: 220px 220px;}
}
相关推荐
Moment2 分钟前
快手前端校招一面面经 🤔🤔🤔
前端·javascript·面试
搬砖的工人4 分钟前
记录WinFrom 使用 Autoupdater.NET.Official 进行软件升级更新
java·前端·.net
掘根16 分钟前
【Protobuf】proto3语法详解1
开发语言·前端·javascript
IT_陈寒26 分钟前
SpringBoot 3.2新特性盘点:这5个隐藏功能让你的开发效率翻倍 🚀
前端·人工智能·后端
艾小码42 分钟前
从入门到精通:JavaScript异步编程避坑指南
前端·javascript
七度光阴;1 小时前
Web后端登录认证(会话技术)
前端·tlias智能辅助系统
菜鸟una2 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'4 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静9 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者10 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端