角度自定义组件动画离开不起作用

Question

我有一个Login组件，希望对其进入和离开进行动画处理。我用ngIf来控制它的显示，但是动画仅在进入时出现。

组件ts

import { Component, OnInit, HostBinding } from '@angular/core';
import { trigger, state, style, animate, transition } from angular/animations';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
    animations: [
        trigger('openclose', [
            transition(':enter', [
                style({opacity: 0}),
                animate(1000, style({opacity: 1}))
            ]),
            transition(':leave', [
                style({opacity: 1}),
                animate(1000, style({opacity: 0}))
            ])
        ])
    ]
})

export class LoginComponent implements OnInit {
    @HostBinding('@openclose') animation;
        ........
}

父html：

<app-login *ngIf="showLogin"></app-login>

当showLogin变为true时，该组件将显示为动画，但是当该组件发出将showlogin设置为false的事件时，该组件将消失。

有什么想法吗？