CSS动画突然结束

Question

我创建了一个微调器动画。单击微调器，JS添加类"loading">并开始旋转。但是，如果我移除这个类，它将返回到上一个位置而没有动画。

我试着使用这个：animation-fill-mode: forwards;，但结果相同。

这是我的CSS：

.loading {
    animation: spin 1s linear infinite 0s forwards;
}

@keyframes spin{
    from{
        transform: rotate(0deg)
    }
    to{
        transform: rotate(360deg)
    }
}

和HTML:

<i class="material-icons refresh-icon" onclick="$(this).toggleClass('loading');">refresh</i>

Answer 1

感谢您的建议。我使用JS和动画化事件来完成。

HTML:

<div class="spinner">
    <i class="material-icons refresh-icon" onclick="spinner(this)">refresh</i>
</div>

JS:

const spinner = el => {
    if($(el).hasClass('lock')) return;
    if($(el).hasClass('loading')){
        $(el).addClass('lock').one('animationiteration webkitAnimationIteration', function() {
            $(el).removeClass('loading').removeClass('lock');
        });
    }else{
        $(el).addClass('loading');
    }
}

指向代码平移的链接：https://codepen.io/nenazarko/pen/zYGPoZy