Question

这段js代码不会在IE中运行（在9,10和11中测试），可能是什么问题？

    function animation() {
    var speed = 3000;
    var container = $('.display-animation');
    container.each(function () {
        var elements = $(this).children();
        elements.each(function () {
            var elementOffset = $(this).offset();
            var offset = elementOffset.left * 0.8 + elementOffset.top;
            var delay = parseFloat(offset / speed).toFixed(2);
            $(this)
              .css("-webkit-animation-delay", delay + 's')
              .css("-o-animation-delay", delay + 's')
              .css("animation-delay", delay + 's')
              .addClass('animated');
        });
    });
}
window.onload = animation;

示例：https://jsbin.com/cesikiwefe

它在Chrome中完美运行。提前谢谢！

Answer 1

您包含的JS没有任何问题。问题出在你的JS Bin示例的CSS中。您在关键帧的规则中有特定于供应商的变体，但在每个变量中都使用-webkit-transform，因此在IE的情况下，您需要更改：

@-ms-keyframes display {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

为：

@-ms-keyframes display {
  from {
    -ms-transform: scale(0);
  }
  to {
    -ms-transform: scale(1);
  }
}

同样适用于其他声明。上述问题是，-webkit-，-o-，-ms-和-moz-等特定于供应商的前缀仅由专门支持该前缀的浏览器处理（Chrome / Safari /其他基于WebKit的浏览器，分别是Opera，Internet Explorer和Firefox）。其他浏览器将（或应该）忽略其他前缀，因此Internet Explorer正在阅读@-ms-keyframes display，进一步解释您的from和to规则，转到-webkit-transform属性，然后决定“我不知道这意味着什么 - 它一定不重要”，并且乐于继续，好像世界上最正常的事情是拥有一个没有任何属性的动画。

Javascript动画无法在IE上运行

1 个答案: