Angular 2動畫結束回調函數的一個例子

Question

我想創建一個函數，將在Angular 2（我正在使用最新的角度cli）動畫結束時觸發。

我一直在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僅僅是一個div

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

說實話我不是太熟悉JavaScript所以任何幫助或一個簡單的例子可以幫助我更好地理解的角度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