发生新的转换时停止所有运行动画？

Question

我有一组元素，我想在其中突出显示当前执行或以前执行过的元素。这在实际操作中更容易理解，所以我们开始：

此 "fading" 行为是通过以下动画实现的：

trigger('isExecuted', [
  state('false', style({ "background": "white" })),
  state('true', style({ "background": "lime" })),
  transition('false => true', animate(0)),
  transition('true => false', animate(1000))
]),

从 false 到 true 时，它会立即变为 "full" 青柠色，而从另一个方向逐渐淡出。

遗憾的是，当同一个执行块再次执行时仍然淡出时，这会出现错误。如果您仔细观看上面的视频，您可能会瞥见小齿轮正在 goForward() 或 wait() 开启的状态，但方块不是绿色的。如果我删除代码中的 wait() 块，问题就会变得更加明显：许多迭代确实显示了齿轮（= 正在执行）但没有着色。

我猜这是因为 Angular 想正确完成之前的动画（仍在淡出）。有没有办法告诉 Angular 在任何时候只使用最新的动画？

Answer 1

我偶然解决了我的问题：似乎陈述 animate(0) 触发了（对我来说不想要的）仅在另一个动画完成后才应用动画的行为。在一些重构过程中，我（偶然地）根本没有声明 false => true 的转换（我重构为 neutral => executed），突然之间样式的应用变得即时。

trigger('background', [
  state('neutral', style({ "background": "white" })),
  state('executed', style({ "background": "lime" })),
  transition('executed => neutral', animate('2000ms)'))
])

发生新的转换时停止所有运行动画？

Stop all running animations when a new transition occurs?

angular

angular-animations

发生新的转换时停止所有 运行 动画？

Stop all running animations when a new transition occurs?

angular

angular-animations

发生新的转换时停止所有运行动画？