🐞 bug报告
受影响的软件包
这个问题是由@angular/animations软件包引起的(我认为)
是否为回归？
是的，之前没有这个问题的版本至少是6。
描述
当使用ngFor渲染一堆元素并触发动画时，当数组发生变化时，触发器无法正确更新。只有一些元素进入新的动画状态。
目前这给我们带来了很多问题，有些列表无法显示。
🔬 最小复现
https://stackblitz.com/edit/angular-animation-issue
点击“切换”按钮以展开项目(注意所有项目都显示出来了)
点击“重新排序”按钮(注意所有项目仍然显示)
再次点击“切换”按钮。(注意项目消失了)
点击“重新排序”按钮(什么都不会明显改变)
点击“切换”按钮(只有部分项目变得可见)。
如果你将动画更改为在“display: none”和“display: ''”之间切换，那么状态变化将按预期发生。
🌍 你的环境
所有环境详细信息可在Stackblitz上找到
还有其他相关信息吗？
似乎在所有浏览器中都会出现这种情况
3条答案
按热度按时间amrnrhlw1#
@zlepper,过去这个版本的Angular是哪个版本？我将进行二分查找分析。
jpfvwuh42#
@matsko 我缩短了 @zlepper 的 Stackblitz 并在其中添加了一些说明。希望这有助于调试。
https://stackblitz.com/edit/angular-animation-issue-3uj6gg
Angular 依赖项现在为 v9.1.4
问题似乎是在重新排序后，*ngFor-复制元素的子元素上的动画回调没有正确注册。
gc0ot86w3#
@mark-langer 只需要应用一个
trackBy函数就可以解决这个问题。original stackblitz + trackBy
文档确实指定了
trackBy对于列表项上的动画正确工作是必要的(相关问题：#42750)