Angular: оставить: введите нерегулярно на ngFor после сортировки

Question

Испытывая некоторые вещи с библиотекой угловой анимации, я испытываю странную проблему. Когда я использую директиву 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 анимацией, все работает как положено. Может кто-нибудь объяснить мне, почему это происходит?

Пример использования стекаблица: https://stackblitz.com/edit/angular-l61zfr