Question

我有一个可以在chrome中运行的动画，但不是IE，即使我有两个语法存在。发生的事情是当您单击按钮时，隐藏的div变为可见（显示：阻止），然后从屏幕外滑入。

编辑：当我将其复制到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>

JS

$(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;}

}

Answer 1

我不知道你是否就是这种情况，但我在媒体查询中有我的内容，IE似乎忽略了它们，不喜欢@声明中的@。

Answer 2

根据您使用的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元素放入变量中。你可能还想检查它是否已经滑落。

CSS动画无法在IE11中运行

2 个答案: