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

html

<div class="dialog-box" [@dialogOpen]="visible ? 'open' : 'closed'">
</div>

第三步，加上动画事件

html

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

123456789101112131415161718192021

转载请保留原文链接： https://zodream.cn/blog/id/211.html

Cookie	有效期	说明
cookie_policy	11个月	Cookie 插件设置 Cookie 的目的是存储用户对使用 Cookie 的同意；它不会存储任何个人数据。
PHPSESSID	11个月	用于绑定用户登录凭证的 Cookie 标识
XSRF-TOKEN	11个月	用于防止跨站脚本攻击的 Cookie 标识

系统信息
Execution time	42.6 ms
CPU usage user + system	63 % + 7 %
Peak of allocated memory	7.16 MB
Included files	227
Classes + interfaces + traits	141 + 29 + 26
Your IP	18.221.150.61
Server IP	172.21.0.9
HTTP method / response code	GET / 200
PHP	8.4.2
Zodream	5.1.0
Server	nginx/1.27.3
运行信息
start	0.0 ms
match route	15.0 ms
controller response	3.6 ms
db engine init	6.3 ms
db engine end	0.6 ms
db init end	0.0 ms
view render	7.1 ms
end	42.8 ms
Queries(13)
[0.3ms] SELECT * FROM `blog` WHERE id = ? LIMIT 1
[0.25ms] SELECT * FROM `blog_term`
[0.6ms] SELECT term_id,COUNT(*) as count FROM `blog` WHERE parent_id = ? GROUP BY term_id
[0.43ms] SELECT id,language FROM `blog` WHERE parent_id = ?
[0.2ms] SELECT `tag_id` FROM `blog_tag_relationship` WHERE blog_id = ?
[0.17ms] SELECT id,name FROM `blog_tag` WHERE id in (?)
[0.17ms] SELECT `blog_id` FROM `blog_tag_relationship` WHERE tag_id in (?) and blog_id <> ?
[0.49ms] SELECT id,title,thumb,parent_id,language,description,created_at FROM `blog` WHERE publish_status = ? and id in (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) and language = ? ORDER BY created_at DESC LIMIT 5
[0.19ms] SELECT `content`,`name` FROM `blog_meta` WHERE blog_id = ?
[0.2ms] SELECT id,name,avatar FROM `user` WHERE id in (?)
[0.24ms] SELECT id,title,thumb,parent_id,language,description,created_at FROM `blog` WHERE id < ? and language = ? and publish_status = ? ORDER BY id DESC LIMIT 1
[0.22ms] SELECT id,title,thumb,parent_id,language,description,created_at FROM `blog` WHERE id > ? and language = ? and publish_status = ? ORDER BY id ASC LIMIT 1
[0.21ms] SELECT * FROM `ad_position` WHERE code = ? and status = ? LIMIT 1
Views(5)
[Rendered] Module/Blog/UserInterface/layouts/header.php : 0.44ms
[Rendered] Module/Blog/UserInterface/Home/content.php : 2.66ms
[Rendered] Module/Blog/UserInterface/layouts/footer.php : 0.06ms
[Rendered] Module/Blog/UserInterface/Home/detail.php : 7.97ms
[Rendered] UserInterface/Home/layouts/main.php : 1.04ms