angular 12 动画执行完成事件
需求
在执行完关闭动画移除组件
代码
第一步，定义一个动画
import { animate, state, style, transition, trigger } from '@angular/animations';
export const DialogAnimation = trigger('dialogOpen', [
state('open', style({
transform: 'translate3d(0, 0, 0)',
opacity: 1,
})),
state('closed', style({
transform: 'translate3d(0, -1000px, 0)',
opacity: 0,
})),
transition('* => closed', [
animate('1s')
]),
transition('* => open', [
animate('0.5s')
]),
]);
12345678910111213141516171819
第二步，使用动画
@Component({
selector: 'app-dialog-confirm',
templateUrl: './dialog-confirm.component.html',
styleUrls: ['./dialog-confirm.component.scss'],
animations: [
DialogAnimation,
],
})
export class DialogConfirmComponent {
public visible = true;
}123456789101112
<div class="dialog-box" [@dialogOpen]="visible ? 'open' : 'closed'">
</div>12
第三步，加上动画事件
<div class="dialog-box" [@dialogOpen]="visible ? 'open' : 'closed'" (@dialogOpen.done)="animationDone($event)">
</div>12
(@动画名.start) 表示动画开始执行
(@动画名.done) 表示动画执行完成
import { AnimationEvent } from '@angular/animations';
@Component({
selector: 'app-dialog-confirm',
templateUrl: './dialog-confirm.component.html',
styleUrls: ['./dialog-confirm.component.scss'],
animations: [
DialogAnimation,
],
})
export class DialogConfirmComponent {
public visible = true;
public animationDone(event: AnimationEvent) {
// 获取状态
if (event.toState !== 'closed') {
return;
}
// 表示关闭动画已经执行完成
}
}123456789101112131415161718192021
转载请保留原文链接： https://zodream.cn/blog/id/211.html