javascript - 删除类时不重置关键帧动画

Question

是否可以保留关键帧动画所施加的过渡？我想在完成之前删除带有关键帧动画的类，并且不重置动画。

例子:

@keyframes right {
    100% {
        left: 500000px;
    }
}

.animate-right {
    animate: right 500s 1;
}

点击带有类的元素相关的JS是:

function(e) {
    var el = this;

    setTimeout(function() {
        el.className = el.className.replace('animate-right', '');
    }, 500);

    el.className += ' ' + animate-right;
}

执行上述操作会导致动画一直应用到它删除的类，但会重置回动画开始前的位置。我已经尝试设置开始/停止点，但我不想这样做，因为它是非常蛮力的。示例:

function(e) {
    var el = this;

    setTimeout(function() {
        el.style.left = el.getBoundingClientRect().left;
        el.className = el.className.replace('animate-right', '');
    }, 500);

    el.style.left = 0;
    el.className += ' ' + animate-right;
}

我也试过在最后应用animation-play-state，但它仍然会重置。

Answer 1

为什么要删除这个类？不要删除类，只需更改 animationPlayState。一个工作示例 http://www.tutorialspark.com/css3/CSS3_Animation_Pause_Resume_Demo.php

如果该类还做其他事情，则为其创建两个类