IE 上旋转图标的奇怪行为

Question

使用 Font Awesome，创建一个旋转图标：

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

当像这样在多个图标上使用 JQuery 切换 fa-spin class 时，行为在不同的浏览器中有所不同：它在 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

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

编辑

仅删除 class 时可以看到相同的行为，如下所示：

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

Answer 1

我不知道为什么 IE 会出现切换旋转问题 class 但您可以在每次切换后尝试此操作：

 if(detectIE())
 {
    var $parent = $element.parent();
    var $newElement = $element.clone();
    $element.remove();
    $parent.append($newElement);
 }


function detectIE() {
   var ua = window.navigator.userAgent;

   var msie = ua.indexOf('MSIE ');
   if (msie > 0) {
     return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
   }

   var trident = ua.indexOf('Trident/');
   if (trident > 0) {
      var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
   }

   var edge = ua.indexOf('Edge/');
   if (edge > 0) {
      return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
   }

   return false;
}

Answer 2

我的最终解决方案是在删除 class.

后强制使用 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 class:

后读取元素的高度

$('#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 3

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

.fa {
    animation: none;
}

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
      .fa {
        animation: none;
    }
</style>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<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>
<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>

IE 上旋转图标的奇怪行为

Spinning icons strange behavior on IE

jquery

internet-explorer

font-awesome