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中不起作用

回答

相关问题