带有异步列表的角度动画

Question

尝试删除或添加列表项时添加动画。

从firebase中检索项目，并在异步管道的帮助下将其添加到DOM。

问题在于动画被附加到所有项目上，而不仅是被删除/添加的项目上。 有什么方法可以完成我想做的事吗？

animations: [
trigger('addToListAnimation', [
  state('in', style({
    opacity: 1,
    transform: 'translateX(0)',
    color: 'red'
  })),
  transition('void => *', [
    style({
      opacity: 0,
      transform: 'translateX(-100px)'
    }),
    animate(300)
  ]),
  transition('* => void', [
    style({
      opacity: 0,
      transform: 'translateX(100px)'
    }),
    animate(300)
  ])
])
]

HTML：

 <tr *ngFor="let shift of activeShifts|async"" [@addToListAnimation]>