Angular 用于淡入淡出视图的角度4动画

我只想在路线改变时，视野淡入淡出。我已经正确地设置了组件，但是我认为需要正确地设置动画语法

这是我当前的动画尝试。 我将此动画导入到我的组件：

从'@angular/animations'导入{触发器、状态、动画、样式、转换}；
导出函数routerTransition（）{
返回fadeInAndOut（）；
}
函数fadeInAndOut（）{
返回触发器（'routerTransition'[
转换（“：输入”[
样式（{不透明度：0}），
动画（3000，样式（{不透明度：1}））
]),
过渡（“：离开”[
动画（3000，样式（{不透明度：0}））
])
]);
}

这是我导入转换的组件之一：

从“@angular/core”导入{Component}；
从“./../animations/fade.animation”导入{routerTransition}”；
@组成部分({
选择器：“关于用户”，
templateUrl:“./about.component.html”，
动画：[routerTransition（）]，
主机：{[@routerTransition]：''}
})
导出类AboutComponent{
构造函数（）{
}
}

这适用于我的布线动画：

类型脚本：

。。。。
动画：[
触发器（'routerTransition'[
转换（'**'，[
查询（':enter，：leave'，style（{position:'fixed'，opacity:1}）），
组（[
查询（“：输入”[
样式（{不透明度：0}），
动画（'1000ms缓进缓出'，样式（{opacity:1}））
]),
查询（':leave'[
样式（{不透明度：1}），
动画（'1000ms缓进-缓出'，样式（{opacity:0}））]，
])
])
])
]

HTML:

我发现需要将显示设置为“阻止”，动画才能工作，如下所示：

@HostBinding（'style.display'）display='block'

此外，对于最新版本，您需要使用
HostBinding
而不是
host

请参阅我的完整文件：

从'@angular/core'导入{Component，OnInit，HostBinding}；
从“/../checkout animations”导入{slideInDownAnimation，fadeInAnimation}；
@组成部分({
选择器：“应用程序签出2”，
templateUrl:'./checkout two.component.html'，
样式URL:['./checkout-two.component.scss'，'./../checkout.component.scss']，
动画：[slideInDownAnimation]
})
导出类CheckoutTwoComponent实现OnInit{
@HostBinding（'@routeAnimation'）routeAnimation=true；
@HostBinding（'style.display'）display='block'；
构造函数（）{}
恩戈尼尼特（）{
}
}
我已经尝试过了，没有发生任何转换，也没有出现任何控制台错误。你能给我看看你的部件吗？