如何在DOM加载完成前暂停除指定div外的所有动画播放状态

开发者阿泽

2026-8-1

解决方案：DOM加载完成前仅保留指定元素及其后代动画运行

问题根源

你之前用:not(.qt-loading)的写法无效，是因为*:not(.qt-loading)会匹配所有不是.qt-loading类的元素——包括.qt-loading内部的子元素（这些子元素本身没有.qt-loading类），所以它们的动画依然会被暂停。正确的思路是先全局暂停所有动画，再精准恢复目标元素及其后代的动画状态。

修正后的CSS代码

/* 1. 全局暂停所有元素及伪元素的动画 */
.js-loading * {
  animation-play-state: paused !important;
}
.js-loading *::before,
.js-loading *::after {
  animation-play-state: paused !important;
}

/* 2. 恢复.qt-loading本身及其所有后代元素的动画 */
.js-loading .qt-loading,
.js-loading .qt-loading * {
  animation-play-state: running !important;
}

/* 3. 恢复.qt-loading及其后代元素的伪元素动画（如果有） */
.js-loading .qt-loading::before,
.js-loading .qt-loading::after,
.js-loading .qt-loading *::before,
.js-loading .qt-loading *::after {
  animation-play-state: running !important;
}

逻辑说明

第一步通过js-loading类对页面所有元素、伪元素设置动画暂停，确保全局动画都被挂起；
第二步精准选中.qt-loading容器本身，以及它下面的所有后代元素，强制将它们的动画状态设为running，覆盖全局暂停规则；
第三步专门处理伪元素的动画恢复，确保.qt-loading及其后代的:before/:after伪元素动画也能正常运行。

配套JS代码优化

原JS代码中replace方法存在潜在问题（会残留空格或误改其他类），建议用更规范的classList方法移除类：

// 初始给根元素添加加载状态类
document.documentElement.classList.add("js-loading");

// 页面完全加载后移除状态类
window.addEventListener("load", showPage, false);

function showPage() {
  document.documentElement.classList.remove("js-loading");
}