angular 12 动画执行完成事件

Fork Me On Github

angular 12 动画执行完成事件

需求

在执行完关闭动画移除组件

代码

第一步,定义一个动画

ts
                   
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

第二步,使用动画

ts
            

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

第三步,加上动画事件

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

(@动画名.start) 表示动画开始执行

(@动画名.done) 表示动画执行完成

ts
                     
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
点击查看全文
标签: angular
0 361 0
在 angular 项目中实现对页面的访问控制
按下回车键,焦点移动到下一个表单或提交表单
使用ng-template 显示tree结构数据
使用 ViewContainerRef.createComponent 替代 ComponentFactoryResolver
angular 12使用 KaTex 显示 AsciiMath 格式的公式