Repository: angular
Issue: animation for :decrement is not executing inside *ngFor
Labels: type: bug/fix,area: animations,freq3: high,P3

<!--
PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.

ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
-->

## I'm submitting a...
<!-- Check one of the following options with "x" -->
<pre><code>
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:
</code></pre>

## Current behavior
<!-- Describe how the issue manifests. -->
When trying to animate a list (using `div` elements and `*ngFor`) where items are moved up and down by one position, one at a time, the animation for `:decrement` is not executing, only the `:increment` transition is executing.
After 2 rounds, the expected behavior is finally correct and both the `:decrement` and `:increment` transition are executed.


## Expected behavior
<!-- Describe what the desired behavior would be. -->
I would expect both the `:decrement` and `:increment` transition to be fired from the beginning since the variable to which the transition is attached is _decremented_ for one element, but _incremented_ for the other one.


## Minimal reproduction of the problem with instructions
<!--
For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://stackblitz.com or similar (you can use this template as a starting point: https://stackblitz.com/fork/angular-gitter).
-->
https://stackblitz.com/edit/angular-ae6tq9

The gist of the code:

```typescript
//...
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  animations: [
    trigger('move', [
      transition(':decrement', [style({ opacity: 0 }), animate('1s ease', style({ opacity: 1 }))]),
      transition(':increment', [style({ transform: 'scale(0.5)' }), animate('1s ease', style({ transform: 'scale(1)' }))]),
    ])
  ],
  styleUrls: ['./app.component.css']
})
export class AppComponent {
//...
  moveUp(item: string) {
    const index = this.items.indexOf(item);
    if (index > 0) {
      this.items.splice(index, 1);
      this.items.splice(index - 1, 0, item);
    }
  }

  moveDown(item: string) {
    const index = this.items.indexOf(item);
    if (index < this.items.length) {
      this.items.splice(index, 1);
      this.items.splice(index + 1, 0, item);
    }
  }
}
```

```html
<div *ngFor="let item of items; let index = index;">
	<div [@move]="index">
		<span (click)="moveUp(item)">^</span>&nbsp;<span (click)="moveDown(item)">v</span> {{index}} : {{item}} 
  </div>
</div>
```


## What is the motivation / use case for changing the behavior?
<!-- Describe the motivation or the concrete use case. -->
Unless there is something wrong with my code, this bug is preventing animation on simple list reordering.

## Environment

<pre><code>
Angular version: X.Y.Z
<!-- Check whether this is still an issue in the most recent Angular version -->

Browser:
- [x] Chrome (desktop) version 69.0.3497.100
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 59.0.2
- [x] Safari (desktop) version 12.0
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  <!-- run `node --version` -->
- Platform:  <!-- Mac, Linux, Windows -->

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>