需求描述：一個(gè)模態(tài)框組件，在點(diǎn)擊了里面的按鈕之后，播放離場(chǎng)動(dòng)畫再移除整個(gè)組件

<div class="panel panel-primary" [@flyIn]="void">
    <div>內(nèi)容</div>
    <button (click)=remove()>點(diǎn)擊進(jìn)行離場(chǎng)動(dòng)畫</button>
</div>

動(dòng)畫部分是這樣定義的

// 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 })
        ]))
    ])
]);

引入這個(gè)動(dòng)畫之后，調(diào)用組件時(shí)有了一個(gè)進(jìn)場(chǎng)動(dòng)畫。
但是想要點(diǎn)擊實(shí)現(xiàn)離場(chǎng)動(dòng)畫應(yīng)該怎么做？