Я пытаюсь создать функцию, которая будет запускаться в конце анимации в Angular 2 (я использую последнюю версию angular 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, поэтому любая помощь или быстрый пример помогут мне лучше понять Angular 2.