CSS動畫在IE11中不起作用

我有一個在chrome中工作但不是IE的動畫，即使我有兩種語法的語法。聽到的情況是，當你點擊一個按鈕，一個隱藏的div變爲可見（display：block），然後從屏幕外滑入。CSS動畫在IE11中不起作用

編輯：下面的代碼似乎工作時，我將它複製到jsfiddle，但我不能讓它在我的網站上工作。下面是直播的網址：http://www.fastfoodnutrition.org/test/

HTML

<ul id="menulist"> 
      <li> 
       <a title=" Restaurants" href="/restaurants.php">Restaurants</a> 
      </li> 
      <li> 
       <a title=" Calculator" href="/calculator.php">Nutrition Calculator</a> 
      </li> 

    </ul>

$(document).ready(function(){ 
    $("#menubutton").click(function(event){ 
     $("#menulist").css("display","block"); 
     $("#menulist").addClass("slidein"); 

    }); 
});

CSS

#menulist{ 
    width: 100%; 
    position: absolute; 
    z-index: 10; 
    top: 50px; 
    right: -160%; 
    float:none; 
    display:none; 
} 

.slidein{ 
    -webkit-animation: slidein .5s ease-in-out .2s 1 normal;  
    -webkit-animation-fill-mode: forwards; 

    animation: slidein 1s; 
    animation-fill-mode: forwards; 
} 
@-webkit-keyframes slidein { 
    0% {right: -160%;} 
    100% {right: 0;} 

} 
@keyframes slidein { 
    0% {right: -160%;} 
    100% {right: 0;} 

}

來源

2014-10-07 user2874270

嘗試將關鍵幀移動到樣式表的頂部。 – APAD1 2014-10-07 22:47:09

給它一個鏡頭，但沒有骰子。 – user2874270 2014-10-07 22:50:01

我總是包含單位，不知道是否從右邊的％：0會導致它？ – Bruford 2014-10-07 22:52:43

根據jQuery的版本你正在使用，此解決方案在IE11罰款。我已將您的ID替換爲類別。

http://jsfiddle.net/1tcnz4j7/15/

<ul class="menulist"> 
     <li> 
      <a title=" Restaurants" href="/restaurants.php">Restaurants</a> 
     </li> 
     <li> 
      <a title=" Calculator" href="/calculator.php">Nutrition Calculator</a> 
     </li> 

</ul> 

<div class="menubutton">Button</div> 

$(document).on('click', '.menubutton', function(){ 
    var object = $('.menulist'); 
    var openData = 'slidein'; 
    $(object).css('display','block').addClass(openData); 
});

我還要把你的DOM元素融入變量。你也可能想檢查它是否已經滑動。

來源

2014-10-07 23:10:09 Ryan

你說得對，它確實在jsfiddle工作。事實上，我複製了整個頁面的代碼（我上面只是一個代碼片段），它工作。我確定我在同一版本的jquery上，所以我不知道問題出在哪裏。這裏有一個鏈接：http://www.fastfoodnutrition.org/test/ – user2874270 2014-10-07 23:19:10

哪個鏈接在IE7-9中動畫將無法工作，所以你需要在你的的某個地方包含http://modernizr.com/ – Ryan 2014-10-07 23:26:39

如果你將瀏覽器窗口的寬度縮小爲移動大小，你會看到頂部標題中出現「漢堡包」菜單圖標，當你點擊它時，主導航（餐館，營養計算器等）應該從右側滑入由於這隻適用於手機，我不太關心IE7-9 感謝您的幫助！ – user2874270 2014-10-07 23:28:26

我不知道這是你的情況，但我有我的內部媒體查詢和IE似乎忽略他們，不喜歡在@聲明@。

來源

2015-03-17 22:14:52

我應該詳細闡述，但我的解決方案是移動更新的關鍵幀而不是在媒體查詢中重寫同名的原始關鍵幀動畫。然後在媒體查詢中，我調用了重命名的動畫來覆蓋原始，而IE似乎對此感到滿意。 – 2018-01-08 15:05:01

CSS動畫在IE11中不起作用

回答

相關問題