jquery - IE 上旋转图标的奇怪行为

Question

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

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

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

例如，使用以下 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 线程上找到解决方法:Icon won't stop spinning on Internet Explorer 11

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

$('#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 的回答一样，此解决方法只能在选定的浏览器下应用。