在尝试使用角度动画库进行某些操作时,遇到了一个奇怪的问题。当我使用ngFor
指令显示一些列表项并用:enter
和:leave
动画对其进行动画处理时,在删除元素之前对列表进行排序时会使用错误的动画。将显示:enter
动画,而不是:leave
动画。
animations: [
trigger('items', [
transition(':enter', [
style({ transform: 'translate3d(0, 50px, 0)', opacity: 0 }),
animate('500ms ease',
style({ transform: 'translate3d(0, 0, 0)', opacity: 1 }))
]),
transition(':leave', [
style({ width: 'translate3d(0, 0, 0)', opacity: 1 }),
animate('500ms ease',
style({ transform: 'translate3d(0, -50px, 0)', opacity: 0 }))
]),
])
]
这些是我的组件声明中的动画。
<h1 @items *ngFor="let item of items; index as i" (click)="remove(i)">{{item}}</h1>
这是我的html组件。
但是,当我将:leave
动画放在:enter
动画之前时,一切都按预期工作。有人可以向我解释为什么会这样吗?
关于stackblitz的示例: https://stackblitz.com/edit/angular-l61zfr