angular中的离场动画怎么用？

Question

需求描述：一个模态框组件，在点击了里面的按钮之后，播放离场动画再移除整个组件

<div class="panel panel-primary" [@flyIn]="void">
    <div>内容</div>
    <button (click)=remove()>点击进行离场动画</button>
</div>

动画部分是这样定义的

// fly-in.component.ts
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

export const flyIn = trigger('flyIn', [
    transition('void => *', [
        animate(3000, keyframes([
            style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
            style({ opacity: 1, transform: 'translateX(25px)', offset: 0.3 }),
            style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 })
        ]))
    ]),
    transition('* => void', [
        animate(300, keyframes([
            style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
            style({ opacity: 1, transform: 'translateX(-25px)', offset: 0.7 }),
            style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 })
        ]))
    ])
]);

引入这个动画之后，调用组件时有了一个进场动画。
但是想要点击实现离场动画应该怎么做？

Answer 1

我所理解的是点击时候,移除组件,就是离场...(或许说的并不专业)
比如: 由一条数组数据,遍历生成DOM!这时点击删除最后一条数据

Answer 2

*ngIf