停止css @keyframes动画

楠辞琦咎2024-01-12 15:48

场景：在做一个基于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;}
}