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>

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;
        }
        // 表示关闭动画已经执行完成
    }
}