title: Angular2 Animations :: Easings not working as expected
body: <p>I'm working on a collapsable component, one that you can click to roll-up/down to show/hide details. The component is as follows:</p>
  
  <pre><code>// component.ts
  
  import {Component, Directive, Input} from '@angular/core';
  import {trigger, state, style, transition, animate} from '@angular/core'
  
  @Component({
      selector: 'expandable',
      template: '&lt;div *ngIf="isExpanded" @animate="'slide'"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;',
      animations: [
          trigger('animate', [
              state('slide', style({ overflow: 'hidden', height: '*' })),
              transition('slide =&gt; void', [animate('200ms ease-out', style({ height: 0 }))]),
              transition('void =&gt; slide', [style({ height: 0 }), animate('200ms ease-out',  style({ height: '*' }))])
          ])
      ]
  })
  export class SimExpandable {
  
      private _expanded: boolean = false;
  
      @Input('expanded') set expanded(value: string | boolean) {
          this._expanded = (value === 'true' || value === true);
      }
  
      get isExpanded(): boolean { return this._expanded }
  
  }
  </code></pre>
  
  <p>The component works fine, partially. The animations, however, are not perfect. I've configured the component to use <code>ease-out</code> animation but in reality, the component animates linearly.</p>
  
  <p>I've tried using <code>ease-out</code>, <code>easeOut</code>, <code>ease-out-cubic</code>, <code>easeOutCubic</code>, <code>ease-in-out</code>, <code>easeInOut</code>, <code>bounce</code>, and a lot of other permutations but the component still animates linearly. I <strong>REALLY</strong> need to use <code>ease-out</code> for my component. Any help would be really appreciated.</p>