移除类时不重置关键帧动画答案

【问题标题】：Do not reset keyframe animation when class removed移除类时不重置关键帧动画
【发布时间】：2016-02-14 09:41:53
【问题描述】：

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

示例：

@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，但它仍然会重置。

【问题讨论】：

只有当你同时通过脚本设置animation-play-state属性我猜。
不，你不能那样做。为什么要在课程完成之前将其删除？
我不想写很多动画，而是通用的动画
“我想在关键帧动画完成之前删除类” class 是如何被删除的？你能创建一个stacksn-ps来演示吗？
我认为不需要 sn-p/fiddle，它是非常简单的代码。我将在问题中添加一些代码。

标签： javascript css keyframe

【解决方案1】：

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

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

【讨论】：

然后在类已经存在的情况下取消暂停？这可能有用...让我试试看。
如果您想将其重新设置为动画，请随时将其更改回running。但是“类已经存在”是什么意思？我不确定我理解你到底想做什么，因为你没有告诉你什么时候想再次运行它
我提到上面的函数与点击事件相关联，点击事件应该切换动画。原本打算通过删除/添加一个类来做到这一点，但看起来它可以暂停。
如果您希望在 javascript 中添加和删除类，您总是可以编写另一个将 animation-play-state 属性设置为暂停的类。例如，当它暂停时，您的el 将有两个活动类：animate-right 和animation-paused。 animation-paused 可以有一个像 .animation-paused{ ... the paused css properties } 这样的 css 声明