0

我遇到了这个问题，并且从几天以来一直在拼命地尝试解决它。我现在所做的是创建一个 jsfiddle，其中包含对整个问题的解释和一个工作示例代码供您查看。

http://jsfiddle.net/jEN8X/7/

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)

我究竟做错了什么？它似乎不适用于 IE 10 或 Opera。

编辑：似乎 IE10 只在刷新页面时触发脚本。

4

2 回答 2

0

Opera seems to start the animation before you noticed it, during the page load - Increase the animation-duration to see that clearly (Demo). Waiting for DOMContentLoaded will be too slow, at least for applying the animation-delay on the already running animation.

To fix that, start the animation only after you set the random delay. For example, you can add the animation-name at that time (Demo).

于 2013-06-20T18:26:58.163 回答
0

通过查看您在 JSFiddle 中的示例，此错误似乎是 CSS 行：

@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px)}60% {opacity:1;transform:translateY(30px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown}

我希望上面使用非 moz （animation-name而不是moz-animation-name）和 webkit （animation-name而不是webkit-animation-name）前缀。

另外，这@-o-keyframes句话的意义何在？

于 2013-06-20T17:39:08.203 回答