Repository: angular
Issue: Enter animation doesn't work with tracked ngFor
Labels: type: bug/fix,area: animations,freq2: medium,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 -->
[ ] 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
</code></pre>

## Current behavior
<!-- Describe how the issue manifests. -->
This template markup for a chatlike collection of messages

    <div fxFlexFill fxLayout="column">
      <div class="messages" fxFlex fxLayout="column-reverse">
        <div *ngFor="let message of messages | async; trackBy identify" class="message" fxFlex="0 0 auto"
             [@flyInOut]="'in'"
             [ngClass]="{own: message.author == userId, other: message.author != userId}">
          <span>{{message.text}}</span>
        </div>
      </div>
      <div class="input">
        <mat-form-field class="textfield">
          <input matInput placeholder="Nachricht" [formControl]="messageControl">
          <button mat-icon-button matSuffix [disabled]="messageControl.invalid" (click)="sendMessage()">
            <mat-icon svgIcon="send"></mat-icon>
          </button>
        </mat-form-field>
      </div>
    </div>
    
With this animation defined

    animations:  [
    trigger('flyInOut', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        style({transform: 'translateX(-100%)'}),
        animate(100),
      ]),
      transition('* => void', [
        animate(100, style({transform: 'translateX(100%)'})),
      ]),
    ]),
    ],

Results in the top element flying in while the new text is displayed at the bottom. 
## Expected behavior
<!-- Describe what the desired behavior would be. -->
The new element is animated.

## 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://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
-->
Animate `:enter` on something that adds items to the lists beginning.

## Environment

<pre><code>
@angular/cli: 1.4.5
node: 8.2.1
os: darwin x64
@angular/animations: 4.4.4
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/flex-layout: 2.0.0-beta.9
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.5.3

Browser:
- [x] Chrome (desktop) version 61.0.3163.100
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>