javascript - 自定义 Javascript 未在 Internet Explorer 9 和 10 中触发

Question

首先这是位于我文档头部的脚本。

<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>

现在我有一个名为“bounceInDown”的类，它有一个关键帧动画。当网站加载时，所有应用了这个辅助类的 div 元素都应该弹回。现在，那里的脚本使反弹具有不同的延迟值。它只是在 Internet Explorer 中不起作用。不知道为什么。我的代码有什么问题？

它适用于除 IE 之外的所有浏览器

Answer 1

对于初学者来说，IE9 不支持 animation，那是在 IE10 中才添加的:p

除此之外，它有可能在 DOMContentLoaded 事件有机会更新延迟之前开始动画。与其在 CSS 中设置动画并在 JS 中调整延迟，不如尝试在 JS 中设置整个动画:

t[n].style.animation = "yourAnimationName 1s "+e;

(将 1s 替换为您的动画持续时间)