Javascript动画无法在IE上工作

这段js代码不会在IE中运行（在9,10和11中测试过），可能是什么问题？Javascript动画无法在IE上工作

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

它完美地运行在浏览器。在此先感谢！

来源

2015-10-26 John McCarty

在那个链接的jsbin（运行Firefox）中没有任何反应;这只是一个空白的窗口。 – Pointy

@Pointy我的意思是说只有镀铬，不知道为什么，我也输入火狐 –

“不工作”不是一个诊断。你有任何错误？你认为这是什么组件出现故障？ – tadman

您所包含的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性质，决定：“我不知道这意味着什么 - 它不能是重要的” ，并且乐于继续下去，就好像世界上最正常的事情是拥有一个没有任何规则属性的动画。

来源

2015-10-26 21:39:56 user3816

Javascript动画无法在IE上工作

回答

相关问题