Angular 6 animations on :increment and :decrement not triggering correctly

Question

trying to wrap my head around animating a list of items where users can move items up and down, one at a time, one step at at a time.

I got all excited when the documentation started talking about :increment and :decrement selector values. However, I can't seem to get this to work.

The StackBlitz is up: https://stackblitz.com/edit/angular-j6ejbe

The gist of my code is:

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)' }))]),
  ])
],

my 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>

The result is pretty odd:

First, it looks like only the :increment transition is kicking in (scale), not the :decrement (opacity). Second, it seems that the transition only fires once per index.

Is this a bug with the transition/animations library?

Or am I just using/understanding it wrong?

Update

Part of the issue seems to be with the *ngFor. If I add a child div element and animate it, things are better, but not 100%.

Two issues still happening:

1. First, it seems that the :increment is working as expected, but the :decrement takes a couple of rounds to work.
2. Second, it seems that I have to use an inner div element. I can't seem to put the animation on an ng-container. This is a bit annoying as I don't like adding additional div elements just to hack something.