title: Angular 4 animation to height *
body: <p>I've been puzzled with something I possibly think is a bug in the animation-module in Angular 4. With the animations in Angular 2.x, I made an animation that animates from height * to a fixed height. This worked perfectly fine in Angular 2. When using Angular 4 on the other hand, the height of the element that has the animation applied to it gets buggy when retriggering the animation before it has completed. The wildcard (*) height is what seems to be causing the issue. Here's a demo snippet that can reproduce the issue. The bug can be triggered if you double-click the element when it is in the *-height state:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { trigger, animate, state, transition, style } from '@angular/animations';
  
  @Component({
    selector: 'app-root',
    template: `
    &lt;h1 [@toggleAnimation]="isEnabled" (click)="isEnabled = isEnabled === 'active' ? 'inactive' : 'active'" style="background: blue"&gt;
      {{title}}
    &lt;/h1&gt;`,
    animations:
    [
      trigger('toggleAnimation', [
        state('active', style({
          height: '*',
        })),
        state('inactive', style({
          height: '600px',
        })),
        transition('active &lt;=&gt; inactive', animate('500ms ease-in-out'))
      ])
    ]
  })
  export class AppComponent {
    title = 'app works!';
    isEnabled = 'inactive';
  }
  </code></pre>
  
  <p>Is there something wrong with how I animate the height using the wildcard value, or is there infact something wrong with the way the wildcard height behaves?</p>