Fork Me On Github

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')
    ]),
]);

第二步,使用动画


@Component({
    selector: 'app-dialog-confirm',
    templateUrl: './dialog-confirm.component.html',
    styleUrls: ['./dialog-confirm.component.scss'],
    animations: [
        DialogAnimation,
    ],
})
export class DialogConfirmComponent {
    public visible = true;
}
<div class="dialog-box" [@dialogOpen]="visible ? 'open' : 'closed'">
</div>

第三步,加上动画事件

<div class="dialog-box" [@dialogOpen]="visible ? 'open' : 'closed'" (@dialogOpen.done)="animationDone($event)">
</div>

(@动画名.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;
        }
        // 表示关闭动画已经执行完成
    }
}
点击查看全文
标签: angular
0 25 0
angular 12使用 KaTex 显示 AsciiMath 格式的公式
ng-deep 使用
angular 12 动态生成组件
angular 全局搜索触发子模块的搜索
angular 12 singleton service.angular 12 中单例 Service 的使用