Angular 2动画路由组件的空洞状态

Question

我正在使用组件装饰器的host属性声明一个动画触发器，其中包含* =＆gt;的过渡状态。空隙。

我知道它正在触发，因为我已经应用了800毫秒的持续时间（用于测试，我将其更改为5秒以确定），当我单击routerLink将其带到另一个组件时，有5秒延迟发生。

问题是，是否没有动画发生。它应向左滑动并渐变为不透明度：0。

这是组件装饰器中的代码：

host: {
   '[@slideInOutright]': 'true',
},
animations: [ 

   trigger('slideInOutright', [

    state('*', style({transform: 'translateX(0)'})),

    transition('void => *', [
      style({transform: 'translateX(150px)', opacity:'1'}),
      animate('300ms 500ms ease-out')
    ]),
    transition('* => void', [
      animate('800ms', style({transform: 'translateX(-60px)',opacity: '0'}))
    ])
  ])

 ]

Answer 1

您应该拨打州true而不是*。