Question

我有一个从Observable异步更新的项目列表。我让它们正确显示，我正在尝试添加一个简单的动画，在添加它们时淡化项目，并在删除它们时淡出它们。我的尝试：

@Component({
  selector: 'locker',
  template: `
    <div *ngFor="let item of (items$ | async)?.items | mapToIterable;trackBy:item?.key"
      [@appear]="'show'">
      <div *ngIf="item.val">
        {{item.key}}
      </div>
    </div>
  `,
  animations: [
  trigger('appear', [
      state('show', style({opacity: 1})),
      transition(':enter', [
        style({opacity: 0}),
        animate(300, style({opacity: 1})),
      ]),
      transition(':leave', [
        style({opacity: 1}),
        animate(300, style({opacity: 0})),
      ])
    ])
  ],
})
export class LockerComponent {
  private items = new BehaviorSubject<any>({
    items: {
      'axe': 1,
      'sword': 1,
      'spear': 1,
    }
  });
  items$ = this.items.asObservable();
  constructor(private lockerService: LockerService) {
    setInterval(() => {
      this.items.next({
        items: {
          'axe': Math.round(Math.random()),
          'sword': Math.round(Math.random()),
          'spear': Math.round(Math.random()),
        }
      });
    }, 1000);
  }

从https://stackoverflow.com/a/35261193/454533

获取mapToIterable管道

基本上它的作用是每隔几秒随机更新一下显示的项目列表。

在大多数情况下，这是有效的，列表中未添加和添加的项目会动画显示，而列表中的项目和已移除的项目都会被动画化。

问题是列表中已有的项目会被短暂设置为动画，然后再次返回。我认为这是由items整体更新引起的，但我尝试使用trackBy来解决这个问题。它也可能与我使用动画和动画状态的方式有关。

如何防止列表中已有的项目再次被动画？

防止异步项

0 个答案: