Angular 4路由动画仅适用于入口

Question

我有一个Angular应用程序，我在其中的几个组件之间路由。 我最近开始为此添加动画，但动画只显示一种方式：

@Component({
  selector: 'about',
  templateUrl: '../views/about.component.html',
  styleUrls: ['../scss/about.css'],
  animations: [
    trigger("aboutAnimate", [
      state('*',
        style({ left: '0' })
      ),
      state('void',
        style({ left: '-100%' })
      ),
      transition(
        "* => void", [
          animate(1000),
          style({ left: '-100%' })
        ]
      ),
      transition(
        "void => *", [
          animate(1000),
          style({ left: '0' })
        ]
      )
    ])
  ],
  host: {
    "[@aboutAnimate]": 'true',
    'style': 'display: block; position: absolute; top: 0;'
  }
})

这是一个带有动画配置的组件装饰器示例，这个配置由多个路径共享（将@aboutAnimate更改为适合）。 这会创建在路由到（在“void =>”条件下）时从左侧滑入的路径，但是当路由远离（“=> void”条件）时不会生成动画。

我还使用了：输入/：为这些条件留下短线并得到相同的结果。

当新的组件滑入时，被远离的组件会挂出1000毫秒，因此它似乎理解它是动画的，因为它不会消失 - 但是在休假时不会应用任何样式。

我错过了什么吗？