组合多个动画答案

【问题标题】：Combine multiple animations组合多个动画
【发布时间】：2016-03-05 18:52:17
【问题描述】：

我试图通过单击一个按钮将动画的几个部分组合在一起。这是一个例子：

.element {
  background-color: black;
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 80%;
}
.one { 
  animation: one 1.5s ease 1 forwards;
}
.two {
  animation: two 1s forwards;
}

@keyframes one {
  from {
    transform: scale(0.25);
    opacity: 0；
  }
  25% {
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 0.5;
  }
}

@keyframes two {
  from {
    opacity: 0.5；
  }
  to {
    opacity: 0;
  }
}

我正在尝试结合这两个动画：一和二。我这样做的方法是使用 JS：classList.add('.two')，当我单击按钮时。但问题是：在我添加类的那一刻，元素更改为默认不透明度，即 1。

为了解决这个问题，我添加了一个包含样式的新类，这些样式实际上是第一个动画的最终样式的克隆。并且在第二部分完成后，我不得不删除类列表以准备播放第一个动画。

所以我的问题是，有没有更好的方法呢？

这是CodePen Demo

我刚刚意识到一个问题：如果我在第一个动画完成之前开始第二个动画，就会出现不连续性（圆圈会突然变大）。

demo可以从上面的链接中找到，谢谢！

【问题讨论】：

对于opacity，这两个动画的设置完全相反，那么如何将两者结合起来呢？问题不清楚。你能向我们展示你正在尝试做什么的演示吗？
嗨，Harry，我不确定您能否打开链接？非常感谢！ codepen.io/q105037696/pen/MyaXpL
您是否必须强制使用动画执行此操作？您可以通过像here 所示的转换来实现几乎相同的效果，而代码少得多。
呃...这很尴尬，我什至不知道过渡...我刚刚了解它，我认为它确实有帮助。非常感谢！
大声笑，完成，再次感谢您的努力！！！

标签： css css-animations

【解决方案1】：

我可以合并这两个动画吗？

我假设组合是指使用相同的关键帧规则生成正向（单击添加动画）和反向（单击删除动画）动画。可以实现，但是正向和反向动画应该完全相同（但方向相反）。在相同的情况下，我们可以使用animation-direction: reverse来实现相同关键帧的反向效果。

这里，正向动画有一个transform 变化，而反向则没有，因此添加animation-direction: reverse 不会产生与原始sn-p 相同的效果。而且，编码也不是像添加一个属性那么简单，像here提到的那样需要做很多工作。

其他两个问题的原因是什么？

这两个问题的原因（即，当单击删除按钮时元素立即获得opacity: 1，而当前进动画仍在发生时单击删除按钮时元素获得完整大小）是相同的。当您删除元素上的动画（通过删除类）时，它会立即捕捉到动画之外指定的大小。

对于第一种情况，大小是.element 下提到的大小（因为删除了.one），并且它的opacity 默认为1，因为其中没有opacity 设置。对于第二种情况，当.one 被删除并添加.two 时，动画被删除，因此元素的大小在.element 中指定，opacity 在.two 中指定（因为稍后在 CSS 文件中）。

那么还有什么替代品呢？

当同时需要正向和反向效果并且动画没有任何中间状态（即只有开始状态和结束状态）时，最好使用过渡而不是动画。原因是过渡会在移除类时自动产生反向效果（与需要将反向动画编写为单独的关键帧并添加到元素的动画不同）。

下面是一个示例 sn-p，展示了如何只使用一个类来实现类似的效果，而无需编写关键帧。

 var theBut = document.getElementById('butt');
 var theBut2 = document.getElementById('butt2');
 theBut.addEventListener('click', function a() {
   document.querySelector('.element').classList.add('one');
 });

 theBut2.addEventListener('click', function b() {
   document.querySelector('.element').classList.remove('one');
 });

.element {
  background-color: #d91e57;
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 90%;
  transform: scale(0.25);
  opacity: 0;
  transition: opacity 2s, transform .1s 2s;
}
.one {
  transform: scale(1);
  opacity: 0.5;
  transition: all 2s;
}

<div class="element">
</div>
<button id="butt">add animation</button>
<button id='butt2'>remove animation</button>

【讨论】：