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上工作

回答

相關問題