Angular 2 RC2 onanimationend

时间:2016-09-13 13:07:43

标签: angular

如何使用此给定组件订阅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) {
}

很抱歉副本:Angular2 Animation onDone callback

1 个答案:

答案 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);
}