Angular 2アニメーション終了コールバック関数の例

Question

Angular 2アニメーションの最後にトリガされる関数を作成しようとしています（最新のAngleCliを使用しています）。

私はコードに私の例でコールバック トリガーを割り当てることによってこれがどのように実装されるのかを理解するためにAngular Animationsにいました。ページにアニメーション化されたコンポーネントがあります。持っているコードは次のとおりです。

//first.component.ts 

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


@Component({ 
    selector: 'app-first', 
    templateUrl: './first.component.html', 
    styleUrls: ['./first.component.css'], 
    host: { 
    '[@routeAnimation]': 'true', 
    '[style.display]': "'block'", 
    '[style.position]': "'absolute'" 
    }, 
    animations: [ 
    trigger('routeAnimation', [ 
     state('*', style({transform: 'translateX(0)', opacity: 1})), 
     transition('void => *', [style({transform: 'translateX(-100%)', opacity: 0}),animate(500)]), 
     transition('* => void', animate(500, style({transform: 'translateX(100%)', opacity: 0}))) 
    ]) 
    ] 
}) 
export class FirstComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 

    } 

    myFunc() { 
    // call this function at the end of the animation. 
} 

} 

HTMLはので、任意の助けや簡単な例は、より良い理解を得る私を助けるだろう、私はJavaScriptを使用して、あまりにも慣れていないよ正直に言うと、単に

<div class="w9914420"> 
    <h2> 
    first-component Works! 
    </h2> 
</div> 

div要素であります角度2の

Answer 1

今、Angular2は、アニメーションイベントを利用する(@animation.start)と(@animation.done)をサポートしています。

たとえば、first.component.htmlには(@routeAnimation.start)=onStart($event),(@routeAnimation.done)=onDone($event)を使用できます。

詳しくはhereをご覧ください。

Plunkerのfirst.component.tsで簡単な例を見ることもできます。

このヘルプが必要です。

Answer 2

これは実施例である：

import {Component, NgModule, Input, trigger, state, animate, transition, style, HostListener } from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector : 'toggle', 
    animations: [ 
    trigger('toggle', [ 
     state('true', style({ opacity: 1; color: 'red' })), 
     state('void', style({ opacity: 0; color: 'blue' })), 
     transition(':enter', animate('500ms ease-in-out')), 
     transition(':leave', animate('500ms ease-in-out')) 
    ]) 
    ], 
    template: ` 
    <div class="toggle" [@toggle]="show" 
     (@toggle.start)="animationStarted($event)" 
     (@toggle.done)="animationDone($event)" 
    *ngIf="show"> 
    <ng-content></ng-content> 
    </div>` 
}) 
export class Toggle { 
    @Input() show:boolean = true; 
    @HostListener('document:click') 
    onClick(){ 
    this.show=!this.show; 
    } 

    animationStarted($event) { 
    console.log('Start'); 
    } 

    animationDone($event) { 
    console.log('End'); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <toggle>Hey!</toggle> 
    </div> 
    `, 
}) 
export class App { 

} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, Toggle ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Plunker