Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

有没有办法添加一个漂亮的过渡，以便它不会直接跳过＆＃34;到非旋转图标？

Answer 1

这可能已经过去很久了，但您可以使用animationiteration事件来了解动画的迭代何时结束，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 2

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

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

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

Answer 3

为什么不使用CSS .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>

FontAwesome：如何从fa-spin转换为no spin

3 个答案: