如何在加载 dom 之前暂停除一个 div 之外的所有内容的动画播放状态

Question

请善待，我已经很久没有在这里发帖了，但我刚刚遇到了一个问题，我正在寻求一些快速帮助。它应该是非常简单的语法/格式，我只是不熟悉而且我正在努力寻找正确的答案。

本质上，我使用以下 CSS 暂停我页面上所有内容的动画播放状态，直到 dom 完全加载 -

.js-loading * {
  animation-play-state: paused !important;
}

.js-loading *:before {
  animation-play-state: paused !important;
}

.js-loading *:after {
  animation-play-state: paused !important;
}

.qt-loading {
  width: 3em;
  height: 3em;
  margin: 0 auto;
  align-content: center;    
}

#qt-loading-qtload001 > div {
  align-content: center;
  top: 50%; 
  margin: 0 auto;
  margin-left: -.5%;
  position: fixed;
  width: 3em;
  height: 3em;
  border: 6px solid;
  border-top-color: transparent;
  border-right-color: white;
  border-bottom-color: white;
  border-left-color: white;
  border-radius: 50%;
  animation: qt-loadanim001 1s infinite linear;
  animation-delay: -100000s;    
}

@keyframes qt-loadanim001 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

但是我现在有一个 div，我需要在加载 dom 之前不暂停动画（类“qt-loading”）...我如何让这个 CSS 暂停我页面上的所有内容，除了“qt-loading”？我会假设 :not 选择器，但我不确定如何将它与我当前的 CSS 结合起来。

非常感谢你

编辑：

有关更多上下文，这里是 html / js

document.documentElement.className += " js-loading";

window.addEventListener("load", showPage, false);

function showPage() {
  document.documentElement.className = document.documentElement.className.replace("js-loading","");
}

<div id="qt-loading-qtload001" class="qt-loading"> <div></div>  

这是我尝试使用 :not 选择器的新 CSS，但我无法让它工作 -

.js-loading *:not(.qt-loading) {
  animation-play-state: paused !important;
}

.js-loading *:not(.qt-loading):before {
  animation-play-state: paused !important;
}

.js-loading *:not(.qt-loading):after {
  animation-play-state: paused !important;
}

.qt-loading {
  animation-play-state: running !important;
}

.qt-loading:before {
  animation-play-state: running !important;
}

.qt-loading:after {
  animation-play-state: running !important;
}

Answer 1

我认为你是对的， :not 选择器可能会解决这个问题。将“.no-pause”类添加到要保留动画的 div 或其他元素。通过此实现，除了具有“.no-pause”类的元素外，所有元素的动画播放状态都将暂停。试试这个代码，让我知道它是否有帮助。

.js-loading *:not(.no-pause) {
  animation-play-state: paused !important;
}

.js-loading *:not(.no-pause):before {
  animation-play-state: paused !important;
}

.js-loading *:not(.no-pause):after {
  animation-play-state: paused !important;
}

更新

.no-pause {
  animation-play-state: running !important;
}

.no-pause:before {
  animation-play-state: running !important;
}

.no-pause:after {
  animation-play-state: running !important;
}