FontAwesome：如何从 fa-spin 过渡到 no spin

Question

我需要在流程完成后从元素中删除 fa-spin class。

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

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>

有没有办法添加一个漂亮的过渡，使其不会 "jump straight" 到非旋转图标？

Answer 1

为什么不使用 .fa-spin 而不是 .fa-spin 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>

Answer 2

这对您来说可能已经很久没用了，但是您可以使用 animationiteration 事件来了解动画迭代何时结束，a la:

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

您可以使用 animation-play-state 暂停动画。

// css
.pause-spinner {
  animation-play-state: paused;
}

// js (jQuery)
$("i").addClass("pause-spinner");

FontAwesome：如何从 fa-spin 过渡到 no spin

FontAwesome: How to transition from fa-spin to no spin

css

css-transitions

font-awesome