发生新的过渡时停止所有正在运行的动画吗？

Question

我有一组要突出显示当前正在执行或先前已执行过的元素的元素。当在实际操作中看时，这很容易理解，所以我们去：

这种“褪色”行为是通过以下动画实现的：

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

从false到true时，它立即变为“全”石灰颜色，而当另一方向时，它逐渐淡出。

可悲的是，当仍在淡出时再次执行同一执行块时，此行为不正确。如果您仔细地观看了上面的视频，可能会瞥见小齿轮正在打开goForward()或wait()的状态，但是该块的颜色不是绿色。如果我删除代码中的wait()块，问题将变得更加明显：许多迭代的确显示了齿轮（=正在执行），但没有颜色。

https://www.dartlang.org/guides/language/effective-dart/design#prefer-inline-function-types-over-typedefs

我猜这是因为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)'))
])