FontAwesome：如何从 fa-spin 过渡到 no 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

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

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

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