在 Angular 8 中使用 NGXS 时如何处理动画和转换?

Question

我是第一次使用 NGXS 存储来管理应用程序的状态。一切都进展得相当顺利，但我遇到了一个我无法克服的问题，它涉及过渡/动画。我有一个项目列表，这些项目可以处于选定状态，使它们展开并显示其他信息。在我将此功能插入存储之前(它直接在组件中处理(，我在max-heigth上使用标准 css 过渡来动画扩展，但是一旦我将功能连接到存储(开始调度操作(，过渡就停止工作。我可以看到每次更新存储时，dom 元素都会被删除并重新添加到 dom 中，这使得使用标准 css 变得不可行。所以我继续尝试使用带有触发器的 angular 动画，这些动画使用不同的状态来进行过渡，但我只让扩展工作而不是收缩，如果我选择一个项目(展开(，然后添加另一个选定的项目重复动画，这是不可取的。以下是相关代码：

animations: [
trigger('xis', [
state(
'expanded',
style({
maxHeight: '100px',
}),
),
state(
'closed',
style({
backgroundColor: 'green',
maxHeight: '0',
}),
),
transition('* => expanded', [animate('300ms')]), // This represent what I already tried
transition('* => closed', [animate('300ms')]),   // And not that I use all of these
transition('* => *', [animate('300ms')]),
transition(':enter', [animate('300ms')]),
transition(':leave', [animate('300ms')]),
]),
],
})
<div
items
class="item"
[ngClass]="{ selected: isSelected(hp) | async }"
*ngFor="let hp of reportItem$ | async"
(click)="selectItem(hp.getId())"
>
<div class="item-header">...</div>
<div
class="complementary-info"
[@xis]="(isSelected(hp) | async) ? 'expanded' : 'closed'"
>
...
</div>
</div>

我想知道是否有人遇到过这个问题并找到了解决问题的方法，或者是否有人可以指出我做错了什么

Answer 1

我最终通过避免在状态更新时重新呈现列表来解决问题。我们可以为 *ngFor 提供一个"跟踪函数"，这将确保列表仅在有实际更改时才重新渲染，从而可以使用标准过渡和删除角度动画。