如何使用此给定组件订阅animationend事件? 我无法添加更多细节。
@Component({
host: {
'[class.like-popover]' : 'true'
},
selector: 'like-tooltip',
template: `<div @flyInOut="'in'">
<div class="arrow"></div>
<div class="tooltip-inner">{{text}}</div>
</div>`,
styleUrls: ['like-tooltip.component.css'],
animations: [
trigger('flyInOut', [
state('in', style({opacity: 1})),
transition('* => *', [
animate('2s linear', keyframes([
style({opacity: 1, offset: 0}),
style({opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 1}),
]))
])
])
]})
export class LikeToolTipComponent {
constructor(_elementRef: ElementRef) {
}
答案 0 :(得分:0)
RC.6引入了动画回调,如:
(@flyInOut.start)="animationStarted($event)"
(@flyInOut.done)="animationDone($event)"#
animationStarted(event: AnimationTransitionEvent) {
console.warn('Animation started: ', event);
}
animationDone(event: AnimationTransitionEvent) {
console.warn('Animation done: ', event);
}