IE11 - 通过 jQuery.toggleClass() 切换 Class 不会激活 IE11 中的 Class - 它适用于所有其他浏览器

Question

这适用于除 IE 11 以外的所有浏览器。

我的代码非常基础。

单击文本可切换 class "infinite"，它（应该）永远循环弹跳效果。

IE11 将 class 应用于 H1 标签，但它不会像在所有其他浏览器中那样无限地动画化。

预期的行为是它在加载时反弹一次（这有效）并单击文本应用 class "infinite" 这（应该）使它永远反弹（这不起作用在 IE 11 中）。

 $(window).ready(function(){
  $('h1').on('click',function(){
   $('h1').toggleClass('infinite');
  });
 });

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="bounce animated">Example</h1>

我在 Windows 7 上，IE 11.0.9600.17239

这是另一个在开始时应用所有 classes 的示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>

<h1 class="animated bounce infinite">Example</h1>

发布第二个示例后，这让我相信这是一个 jQuery 某种类型的问题，结合 IE 11...

Answer 1

它不漂亮，但它完成了工作：

$(window).ready(function(){
    var el = $('h1');

    el.on('click',function(){
        el.removeClass('bounce animated');
        setTimeout(function() {
            el.toggleClass('bounce animated infinite');
        });
    });
});

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="bounce animated">Example</h1>

在动画之前完成后设置 "animation-iteration-count" 时，IE 似乎不配合。这将删除并重新添加类以确保动画完成。

IE11 - 通过 jQuery.toggleClass() 切换 Class 不会激活 IE11 中的 Class - 它适用于所有其他浏览器

IE11 - Toggling a Class via jQuery.toggleClass() Doesn't Activate the Class in IE11 - It Works in All Other Browsers

css

jquery

css-animations

internet-explorer-11