Um exemplo de animação Angular 2 terminou a função de retorno de chamada
Estou tentando criar uma função que será acionada no final de uma animação no Angular 2 (estou usando o mais recente cli angular).
Eu estive noAnimações angulares Para entender melhor como isso seria implementado, atribuindo o gatilho com um retorno de chamada no meu exemplo de código, tenho um componente que é animado na página. o código é o seguinte:
//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.
}
}
o html é simplesmente uma div
<div class="w9914420">
<h2>
first-component Works!
</h2>
</div>
Para ser sincero, não estou muito familiarizado com JavaScript, portanto, qualquer ajuda ou um exemplo rápido me ajudaria a entender melhor o Angular 2.