如何设置一段时间后停止的动画图标

Question

我在事件后显示以下代码：

$("span[name|='ttimer'").html("<i class='fa fa-refresh fa-spin fa-5x' aria-hidden='true'></i> ");

如何让旋转动作持续3秒钟然后停止移动？

Answer 1

首先，请注意您的属性选择器缺少结束]。

要执行您需要的操作，您需要删除元素上的fa-spin类。您可以使用setTimeout()执行此操作，如下所示：

var $span = $("span[name|='ttimer']").html('<i class="fa fa-refresh fa-spin fa-5x" aria-hidden="true"></i>');
setTimeout(function() {
  $span.find('.fa-spin').removeClass('fa-spin');
}, 3000);

Answer 2

也许你正在寻找这个，animation-iteration-count

div {
    animation-iteration-count:3;
    -webkit-animation-iteration-count:3; /* Safari and Chrome */
}

这样您就不必删除类名

Answer 3

动画由fa-spin引起 - 您可以使用setTimeout：

删除它

setTimeout(function() { 
    $("span[name|='ttimer']>i.fa-spin").removeClass("fa-spin");
}, 3000);