角动画状态奇怪的行为答案

【问题标题】：Angular animation state strange behaviour角动画状态奇怪的行为
【发布时间】：2019-12-13 01:36:14
【问题描述】：

我无法完全理解角度动画状态的工作原理。

我有两个列表。第一个带有动画，第二个带有拖放。秒列表更改（cdkDropListDropped 触发）后，第一个列表的动画也被触发。动画应始终从“小”状态变为“大”，然后再变为“小”。有时它会直接从“大”中触发（尝试两次将最后一个元素拖到顶部）。这很奇怪

stackblitz 示例 https://stackblitz.com/edit/angular-9cpned

【问题讨论】：

标签： angular animation angular-animations

【解决方案1】：

我不能告诉你确切的原因，但这似乎与 Angular 的 *ngFor 渲染生命周期有关。重新渲染列表项似乎有时会中断动画。这似乎可以通过将trackBy 函数添加到*ngFor 来解决。这就是我在这里更改的全部内容：https://stackblitz.com/edit/angular-zcxrbs。

【讨论】：