停止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;}
}
相关推荐
贵沫末15 分钟前
React——基础
前端·react.js·前端框架
每天开心19 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry26 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9334 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子34 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982435 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug37 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo37 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js