停止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;}
}
相关推荐
工呈士18 分钟前
CSS布局实战:Flexbox 与 Grid 精髓解析
css·面试·flexbox
海底火旺20 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺20 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码21 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou22 分钟前
组件测试
前端
JustHappy24 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可38 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3 + GraalVM原生镜像实战:云原生时代的毫秒启动与性能调优》
前端·后端
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3.0×GraalVM:云原生时代的毫秒级启动实战革命》
前端·后端
嘻嘻嘻嘻嘻嘻ys1 小时前
《Vue 3.4响应式内核优化与WebAssembly性能突破实战指南》
前端·后端