FontAwesome:如何从fa-spin过渡到无旋转

Question

一旦

过程完成，我需要从元素中删除fa-spin类。

问题是旋转图标和非旋转图标之间没有过渡。

setTimeout(function() {
  stopSpinner();
}, 2500);
function stopSpinner() {
  $('i').removeClass('fa-spin');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-lg fa-refresh fa-spin"></i>

有没有办法添加一个漂亮的过渡，这样它就不会"直接跳"到非旋转图标？

Answer 1

您可以使用动画播放状态暂停动画。

// css
.pause-spinner {
  animation-play-state: paused;
}
// js (jQuery)
$("i").addClass("pause-spinner");

Answer 2

这对您来说可能已经过时了，但您可以使用 animationiteration 事件来了解动画的迭代何时完成，例如：

var done = false;
setTimeout(function() {
  done = true;
}, 2546);
$('.fa-spin').on('animationiteration', function(event) {
  if (done) {
    $(event.target).removeClass('fa-spin');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<i class="fa fa-lg fa-refresh fa-spin"></i>

Answer 3

与其使用 .fa-spin，为什么不使用 CSS transition？

$('i').addClass('spin');

i {
    transition: all 0.5s ease;
}
.spin {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-lg fa-refresh"></i>