反转正在进行的 CSS 动画答案

【问题标题】：Reverse a CSS animation which is in progress反转正在进行的 CSS 动画
【发布时间】：2014-12-23 03:21:40
【问题描述】：

我有一个框，它会变成蓝色，然后在单击时变为绿色。如果在完成第一个动画之前再次单击该框，我希望该框反转其淡入淡出方向并从蓝绿色变回蓝色。

我想避免使用转场*，因为当用多个转场*替换关键帧时，每个转场之间会有延迟，因为浏览器需要一秒钟来确认新的 CSS 类。

您可以在这个更复杂的示例中看到我所说的延迟是什么意思：

由于附加类而延迟：http://codepen.io/Meo/pen/QwERrR
因为动画没有延迟：http://codepen.io/Meo/pen/RNGwPe

这可能吗？我的尝试如下，但它没有按预期工作。

另外，我有 looked into using the Web Animations API，但它很新，似乎有自己的一系列限制，尽管它可以反转动画。

$('.box').click(function() {
  if ($(this).hasClass('colored')) {
    if ($(this).hasClass('reverse')) {
      $(this).removeClass('reverse');
    } else {
      $(this).addClass('reverse').removeClass('colored');
    }
  } else {
    $(this).addClass('colored');
  }
});

.box {
  background-color: red;
  width: 200px;
  height: 200px;
}
.colored {
  -webkit-animation: color 4s linear forwards;
}
.reverse {
  -webkit-animation: color 4s linear backwards;
}
@-webkit-keyframes color {
  0% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>

【问题讨论】：

CSS 过渡可能是一种更简单的方法。
如问题描述中所述 - 我想避免使用转换（哦，我在描述中说转换，我的意思是转换。抱歉，现在还早）而不是动画。当收听“webkitTransitionEnd”然后应用一个新的 CSS 类来模拟关键帧中的步骤时，每个步骤之间会有一个延迟，因为浏览器需要一点时间来确认元素上的新 CSS 类。这使得整体效果感觉笨重而不是平滑。
我知道 Greensock 库可以使用 JS 反转动画 - 我不确定它是否对你想要做的事情有点过分！也许会有所帮助：codepen.io/GreenSock/pen/AwCKp
我忘记了 Greensock！这可能有点矫枉过正，但绝对值得考虑。

标签： css css-animations

【解决方案1】：

假设它只是更改简单的 CSS 属性（如背景颜色），我认为它可以在没有笨拙或延迟的情况下完成（甚至像你上面所说的多行 JS 逻辑）。

这支笔能达到你想要的效果吗？它只是使用 jQuery toggleClass 方法在盒子的两种 CSS 状态之间切换。而且，只需使用更简单的 CSS 过渡，而不用担心关键帧和所有这些事务，它应该可以毫无延迟地制作动画，并且可以在动画中的任何点来回切换：

更新我编辑了我的以重新创建我认为您想要的效果 - 这是否更接近您希望动画看起来的样子（减去缓动和动画长度，我的意思是）？

http://codepen.io/jonathanrbowman/pen/GgjRoz

HTML

<div class="box animate">
  <div class="inner-box animate"></div>
  <div class="line animate"></div>
</div>

CSS

.box {
  width: 100px;
  height: 100px;
  position: relative;
  border: 6px solid #444444;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  background-color: green;
}

.filled-box {
  background-color: green;
}

.inner-box {
  width: 110px;
  height: 110px;
  background-color: white;
  position: absolute;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  margin-top: -55px;
  margin-left: -55px;
}

.inner-box-collapsed {
  width: 0px;
  height: 0px;
  margin-top: 0px;
  margin-left: 0px;
}

.line {
  width: 0px;
  height: 10px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5px;
  margin-top: -5px;
}

.line-extended {
  width: 55px;
}

.animate {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s; 
}

jQuery

$(".box").click(function(){
  $(".line").toggleClass("line-extended");
  $(".box").toggleClass("filled-box");
  $(".inner-box").toggleClass("inner-box-collapsed");
});

【讨论】：

@Sean 实际上说他想避免 CSS 过渡。
明白，我只是想确保这种方式绝对不适用于他的情况，因为它很简单。这可能不是他想要的工作方式，但如果他没有尝试过这种方式，我认为将其视为一种潜在的选择可能会有所帮助。
为了这个问题，这个例子被简化了。您可以在通过 URL 提供的 CodePen URL 中看到更复杂的用法。 :)
我明白了，那是我的错误。我查看了您提供的 codepen，并认为可能不同的动画可以分成它们自己的元素/过渡集，并由 jQuery 在复选框元素内绑定在一起。以这种方式编写更多 HTML，但仍然可以更简单。
当然不是一个糟糕的主意！我喜欢你的第二个例子，但我同意它要复杂得多，但我会给你加分。 :)

【解决方案2】：

不幸的是，CSS 动画无法（正确）以您需要的方式进行操作。可能会在 JavaScript 中获取当前关键帧的近似值，然后动态创建一组新的关键帧并分配给您的元素。例如，请查看本文的“操作 CSS 动画”部分：http://css-tricks.com/controlling-css-animations-transitions-javascript/

另外，由于无论如何您都不会使用 Javascript，因此您可能需要考虑使用 jQuery（加上 jQuery UI 来为 backgroundColor 制作动画）来制作这个动画。看看这个jsFiddle。

【讨论】：