：increment和：decrement上的Angular 6动画无法正确触发

Question

尽我所能围绕动画列表项目，以便用户可以一次或一次，一步一步地上下移动项目。

当documentation开始谈论: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上。这有点烦人，因为我不喜欢仅仅为了 hack 添加一些div元素。