动画在Angular 5应用程序中运行完毕后，将显示设置为无/阻止

Question

我正在开发Angular 5 app，它在更改标签时会有一些动画。 它只是简化动画。

我现在想要实现的是，一旦动画停止运行，将显示设置为none或阻止。 我不确定该怎么做。

我目前的代码如下：

animations: [
    trigger('slideInOut', [
        state('active', style({
            transform: 'translateY(0px)'
        })),
        state('out', style({
            transform: 'translateY(1000px)'
        })),
        transition('active => out', animate('600ms ease-in-out')),
        transition('out => active', animate('600ms ease-in-out'))
    ]),
    trigger('slideLeftRight', [
        state('leftOut', style({
            transform: 'translateX(-1000px)'
        })),
        state('active', style({
            transform: 'translateX(0px)'
        })),
        state('rightOut', style({
            transform: 'translateX(1000px)'
        })),
        transition('active => leftOut', animate('600ms ease-in-out')),
        transition('leftOut => active', animate('600ms ease-in-out')),
        transition('active => rightOut', animate('600ms ease-in-out')),
        transition('rightOut => active', animate('600ms ease-in-out'))
    ])

任何帮助都将不胜感激。