Angular 2-Animation beendet Callback-Funktion

Question

Basierend auf dem Animationsbeispiel für Angular 2, gibt es eine Möglichkeit, eine Callback-Funktion anzugeben, wenn die Animation endet?

animations: [ 
trigger('heroState', [ 
    state('inactive', style({ 
    backgroundColor: '#eee', 
    transform: 'scale(1)' 
    })), 
    state('active', style({ 
    backgroundColor: '#cfd8dc', 
    transform: 'scale(1.1)' 
    })), 
    transition('inactive => active', animate('100ms ease-in')), 
    transition('active => inactive', animate('100ms ease-out')) 
]) 
] 

Answer 1

Dies wird noch nicht unterstützt.

Es gibt ein offenes Problem Siehe https://github.com/angular/angular/issues/10304 und eine Pull-Anforderung https://github.com/angular/angular/pull/10360, um diesen Anwendungsfall zu unterstützen.

Answer 2

Die Web-Animation API gibt animationstart und animationend Ereignisse, aber es scheint Angular 2 Animationen in einer Art und Weise gilt, dass die Ereignisse nicht zugänglich macht.

Ich habe versucht, animierte Elemente mit ViewChild greifen und Ereignislistener (sowohl direkt als auch mit Renderer) anwenden, aber die Rückrufe werden nie aufgerufen.

Was Sie kann tun, ist ein Timeout angeben, wenn Sie tatsächlich die Animation Zustandsänderung initiieren, die einen Rückruf nach einer Zeitdauer, die gleich der Länge des Übergangs aufruft.

startAnimation() { 
    this.hero.state = 'active'; 
    setTimeout(() => { 
    //Do something after the animation. 
    }, 100); 
} 

Es ist ein wenig sperrig, weil Sie den Übergang und die Timeout-Zeit ändern müssen, wenn Sie die Animation Timing ändern wollen, aber es funktioniert gut genug. Ich habe heute etwas versucht, wo ich am Ende einer Übersetzungsanimation sofort in einen statischen Animationszustand (mit einem 0ms-Übergang) wechselte und gleichzeitig eine statische Übersetzung mit dem Renderer anwendete. Es funktionierte reibungslos ohne irgendwelche Sprünge oder Schluckauf.

Answer 3

Es ist jetzt wie erwähnt hier unterstützt: https://angular.io/docs/ts/latest/guide/animations.html#!#animation-callbacks

Diese Funktion scheint seit 2.0.0-rc.6 umgesetzt werden (2016.08.31).

Zum Beispiel: Wenn Sie einen Trigger namens ‚flyInOut‘ Sie einfach diese zu Ihrem Template-Code hinzufügen:

<div (@flyInOut.start)="animationStarted($event)" 
    (@flyInOut.done)="animationDone($event)"></div> 

Das Ereignis (AnimationTransitionEvent vom Kern) liefert nützliche Informationen über den ausgelösten Zustand. (z. B. fromState und toState).

Leider können Sie jetzt Ereignisse über den Fortschritt der Animation erhalten (wie @ yourTrigger.animate).