Question

我有一个

* {
  animation-play-state: paused;
}

在我的全局CSS中，它控制页面上的所有动画。所有元素加载后如何更改为“正在运行”？它基本上像一个加载屏幕，但它在页面加载完成之前运行。

Answer 1

请不要使用*选择器来控制动画（或任何东西，这个选择器是known to be slow）。而是使用正文中的类作为帮助程序，并在不再需要时删除该类。

body.noanim *{
        animation-play-state: paused;
}

然后

$(document.body).removeClass('noanim');

<强> {编辑}

您可以过滤一些以匹配您的特定元素集，并替换该过滤器的*选择器。

我设置了一个带有demo的jsfiddle，它在页面加载完成后以3秒超时恢复动画。

Answer 2

普通JavaScript：

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.querySelectorAll("*");
    for (var i = 0; i < elements.length; i += 1) {
        elements.item(i).style.animationPlayState = "running";
    }
});

<强> jQuery的：

$(document).ready(function() {
    $("*").css("animation-play-state", "running");
});

Javascript - 在页面加载

2 个答案: