Angular:leave:在排序后在ngFor上输入不规则行为

时间:2019-06-27 16:30:39

标签: angular animation ngfor

在尝试使用角度动画库进行某些操作时,遇到了一个奇怪的问题。当我使用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

0 个答案:

没有答案