角度的flyInOut动画无法正常工作

Question

我正在尝试为应用程序中组件之间的变化创建动画。活动的那个应该退出到右边（：leave），而新的一个应该进入左边（：enter）。我已经设置了代码来执行此操作，但是输入的代码将呈现在离开的代码下方（动画正常工作），我想这与将它们显示为块有关，但是当我删除该样式时在host属性中，动画会中断。现在已经挠了一个小时，我真的很感谢在此方面的一些帮助。我的代码是：

@Component({
  (...)
  host: {
    '[@flyInOut]': 'true',
    'style': 'display: block;'
  },
  animations: [
    flyInOut()
  ]
})

export function flyInOut() {
    return trigger('flyInOut', [
        state('*', style({
            opacity: 1,
            transform: 'translateX(0)'
        })),
        transition(':enter', [
            style({
                transform: 'translateX(-100%)',
                opacity: 0
            }),
            animate('2000ms ease-in')
        ]),
        transition(':leave', [
            animate('2000ms ease-out', style({
                transform: 'translateX(100%)',
                opacity: 0
            }))
        ])
    ]);
}

我要从一个单独的文件中导入动画，并且故意将时间设置得很高以进行调试。感谢任何能够提供帮助的人！