Question

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

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

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

受到接受的答案的启发，我设法通过重置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>

Answer 2

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

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

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

2 个答案: