Angular2 Animations :: Easings not working as expected
<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>