Question

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

.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

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

可以从上面的链接找到演示，谢谢！

Answer 1

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

我假设通过组合你意味着使用相同的关键帧规则生成前进（点击添加动画）和反转（点击删除动画）动画。它可以实现，但为此，正向和反向动画应该完全相同（但方向相反）。如果相同，我们可以使用animation-direction: reverse来实现相同关键帧的反向效果。

此处，前向动画的变化为transform，反之则不会，因此添加animation-direction: reverse不会产生与原始片段相同的效果。而且，编码并不像添加属性那么容易，需要做很多工作，如提到here。

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

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

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

那还有什么呢？

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

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

＆＃13;

opacity

＆＃13;

.two

＆＃13;

 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');
 });

＆＃13;

合并多个动画

1 个答案: