时间戳

首页 > 解决方案 > CSS动画突然结束

javascript - CSS动画突然结束

问题描述

我创建了一个微调器动画。单击微调器时，JS 添加类“加载”并开始旋转。但是如果我删除这个类，它会返回到以前的位置而没有动画。

我试着用这个： 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>

标签： javascriptjquerycsscss-animations

解决方案

感谢您的建议。我使用 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

推荐阅读