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

【问题标题】：How to handle animations and transations when using NGXS in Angular 8?在 Angular 8 中使用 NGXS 时如何处理动画和转换？
【发布时间】：2019-10-08 19:57:38
【问题描述】：

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

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>

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

【问题讨论】：

标签： angular transition angular-animations ngxs

【解决方案1】：

我最终通过避免在状态更新时重新呈现列表来解决问题。我们可以向 *ngFor 提供 here 中记录的“跟踪功能”，这将确保列表仅在发生实际更改时重新渲染，从而可以使用标准转换和丢弃角度动画。

【讨论】：