css - Font Awesome : How to transition from fa-spin to 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");