Пример функции обратного вызова анимации с угловым 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 class="w9914420"> 
    <h2> 
    first-component Works! 
    </h2> 
</div> 

Честно говоря, я не слишком хорошо знаком с JavaScript, так что любая помощь или быстрый пример поможет мне получить лучшее понимание of Angular 2.

Answer 1

Теперь поддерживается Angular2 (@animation.start) и (@animation.done), чтобы задействовать события анимации.

Например, вы можете использовать (@routeAnimation.start)=onStart($event), (@routeAnimation.done)=onDone($event) в файле first.component.html.

Вы можете узнать больше на here.

Также вы можете увидеть простой пример с first.component.ts по адресу Plunker.

Надеюсь, что эта помощь!

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