Angular2 Animationen :: Easings funktioniert nicht wie erwartet

Question

Ich arbeite an einer zusammenklappbaren Komponente, die Sie klicken können, um Roll-Up/Down zu zeigen/Details zu verbergen. Die Komponente ist wie folgt:

// component.ts 

import {Component, Directive, Input} from '@angular/core'; 
import {trigger, state, style, transition, animate} from '@angular/core' 

@Component({ 
    selector: 'expandable', 
    template: '<div *ngIf="isExpanded" @animate="'slide'"><ng-content></ng-content></div>', 
    animations: [ 
     trigger('animate', [ 
      state('slide', style({ overflow: 'hidden', height: '*' })), 
      transition('slide => void', [animate('200ms ease-out', style({ height: 0 }))]), 
      transition('void => 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 } 

} 

Die Komponente funktioniert gut, teilweise. Die Animationen sind jedoch nicht perfekt. Ich habe die Komponente konfiguriert, um ease-out Animation zu verwenden, aber in Wirklichkeit animiert die Komponente linear.

Ich habe versucht mit ease-out, easeOut, ease-out-cubic, easeOutCubic, ease-in-out, easeInOut, bounce, und vielen anderen Permutationen aber die Komponente noch linear beseelt. I WIRKLICH müssen ease-out für meine Komponente verwenden. Jede Hilfe würde wirklich geschätzt werden.

Answer 1

Animate ist nicht länger ein Teil in angular/core .. also müssen Sie es importieren, seinen Teil des Moduls ngAnimate .. so dass Sie den $ animate-Dienst verwenden müssen, um js/lib/angular-animate zu importieren. js libs.

bower install --save angular-animate 

Answer 2

CSS-Eigenschaften Übergang und Animation können Sie die Lockerung Funktion auszuwählen. Leider unterstützen sie nicht alle Lockerungen und Sie müssen die gewünschte Beschleunigungsfunktion selbst angeben (als Bezier-Kurve).

Easings.net

würde es scheinen, dass es 4 Standardtypen erleichtert, dass funktionieren sollte.

• linear
• Leichtigkeit
• Einfachheit in
• Leichtigkeit-out
• Leichtigkeit-in-out

Diese Arbeit direkt, aber die Unterschiede sind subtil

Für effektivere Arten der Lockerung müssen Sie eine Bezierkurve verwenden, die Ihnen erlaubt um deine eigene Erleichterung zu schaffen. Zum Beispiel ist das unter „easeInOutBack“

cubic-bezier(0.680, -0.550, 0.265, 1.550) 

Wenn mit kantigem belebtes Funktion

animate("1500ms 2000ms cubic-bezier(0.680, -0.550, 0.265, 1.550)", style({transform: "translateX(-100%)"})) 

Sie zu diesem bezier curver generator navigieren können, die Sie mit der Fähigkeit, sollten Sie Ihre eigenen Easing zu erstellen.