0

我为我的玩家制作了 css3 动画。所有具有“BounceInDown”类的都应用了动画。现在，我有了这个代码，它为我的动画提供了不同的延迟值，这样我就得到了一个非常好的随机下降效果。当然，我可以创建相同 css 的变体，但这将是一项乏味的任务，因为每个新玩家都需要一个具有不同动画延迟的新 css 类，例如 3s、4s、5s、2.5s 等等。

现在我在我的 html 文档的头部有这段代码，就在 jquery 和我的其他 javascripts 之后。

<script>
document.addEventListener("DOMContentLoaded", function () {
    var e, t = document.querySelectorAll("div.bounceInDown");
    for (var n = 0, r = t.length; n < r; n++) {
        e = Math.round(Math.random() * 7e3) + "ms";
        t[n].style.animationDelay = e;
        t[n].style.WebkitAnimationDelay = e
    }
}, false)
</script>

上面的代码在 chrome、Safari 和 Firefox 中完美运行，但在最新的 Opera 和 Internet Explorer 10 中无法正常运行。现在，动画在 Opera 和 IE 10 中运行，但它们都同时触发，这意味着问题只是 javascript .

我一直在尝试解决这个问题一个多星期，但没有运气。如果有人知道解决方案，或者如果您有比我更好的跨浏览器代码，那就太好了。还解释了我做错了什么，因为我已经正确设置了所有内容。我的网站上没有 js 错误。符合所有标准。

4

0 回答 0