angular - :increment 和 :decrement 上的 Angular 6 动画未正确触发

Question

试图让我的头脑围绕着一个项目列表的动画，用户可以在其中上下移动项目，一次一个，一次一步。

当文档开始讨论:increment和:decrement选择器值时，我感到非常兴奋。但是，我似乎无法让它发挥作用。

StackBlitz 已上线：https ://stackblitz.com/edit/angular-j6ejbe

我的代码的要点是：

animations: [
  trigger('move', [
    transition(':decrement', [style({ opacity: 0 }), animate('5s ease', style({ opacity: 1 }))]),
    transition(':increment', [style({ transform: 'scale(0.5)' }), animate('5s ease', style({ transform: 'scale(1)' }))]),
  ])
],

我的html：

<div [@move]="index" *ngFor="let item of items; let index = index;">
  <span (click)="moveUp(item)">^</span>&nbsp;<span (click)="moveDown(item)">v</span> {{index}} : {{item}} 
</div>

结果很奇怪：

首先，看起来只有:increment过渡开始了（规模），而不是:decrement（不透明度）。其次，似乎每个索引只触发一次转换。

这是过渡/动画库的错误吗？

还是我只是使用/理解错误？

更新

部分问题似乎与*ngFor. 如果我添加一个子div元素并为其设置动画，情况会更好，但不是 100%。

仍然存在两个问题：

1. 首先，它似乎:increment按预期工作，但:decrement需要几轮才能工作。
2. 其次，似乎我必须使用内部div元素。我似乎无法将动画放在ng-container. 这有点烦人，因为我不喜欢添加额外div的元素只是为了破解一些东西。

标签： angularangular6angular-animations