Попытка добавить анимацию, когда элемент списка удален или добавлен.
Элементы извлекаются из 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]>