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

如果该类也执行其他操作，则为其创建两个类

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

1 个答案: