在IE上旋转图标奇怪的行为

Question

使用Font Awesome,这会创建一个旋转图标:

<span class="fa fa-spinner fa-spin"></span>

当fa-spin在这样的几个图标上使用JQuery 切换类时,不同浏览器的行为会有所不同:它在Chrome和FireFox下按预期工作,而在IE或Edge下只能正确处理第一次出现.

例如,使用以下HTML:

<span class="fa fa-spinner fa-spin"></span>
<span class="fa fa-refresh"></span>
<span class="fa fa-spinner fa-spin"></span>
<span class="fa fa-refresh"></span>

使用这个简单的JQuery代码:

$(function () {
  setInterval(function() {
    $('span').toggleClass('fa-spin');
  }, 2000);
});

只有第一个图标在旋转和停留之间切换,而其他图标始终在旋转.

在这里演示:http://codepen.io/anon/pen/qOWxRg

我该如何解决这个问题,以便所有现代浏览器的行为都一样？

---

编辑

仅删除类时,可以看到相同的行为,如下所示:

$('#icon').addClass('fa-spin');
setTimeout(function() {
  $('#icon').removeClass('fa-spin');
  $('#icon').height();
}, 2000);

Answer 1

我的最终解决方案是transform在删除类后强制CSS值.

像这样的东西:

$('#icon').addClass('fa-spin');
setTimeout(function() {
  $('#icon').removeClass('fa-spin');
  $('#icon').css('transform', 'none');
}, 2000);

原始答案

可以在此Github线程上找到解决方法:图标不会在Internet Explorer 11上停止旋转

解决方法(对于IE)是在删除(或切换)fa-spinCSS类后读取元素的高度:

$('#icon').addClass('fa-spin');
setTimeout(function() {
  $('#icon').removeClass('fa-spin');
  $('#icon').height();
}, 2000);

在Edge下,您必须设置元素的高度,因为仅仅读取它是不够的.像这样的东西有效:

$('#icon').addClass('fa-spin');
setTimeout(function() {
  $('#icon').removeClass('fa-spin');
  $('#icon').height($('#icon').height());
}, 2000);

与Grzegorz的答案一样,此解决方法仅适用于选定的浏览器.

Answer 2

受可接受的答案启发，我设法通过重置CSS中的动画来解决该问题。因此，将javascript排除在外。

.fa {
    animation: none;
}

但是请确保它不会覆盖fa-spin动画，因为它将阻止一切旋转。如果您使用的是预编译器，则可以使用以下方法：

.fa {
    &:not(.fa-spin) {
        animation: none;
   }
}

.fa {
    animation: none;
}

.fa {
    &:not(.fa-spin) {
        animation: none;
   }
}