Angular 2动画'void'=>'active'状态

Question

我正在尝试首次实现角度动画。

这是我的代码

animations: [
    trigger('cardState', [
      state('inactive', style({transform: 'translateX(0) scale(1)'})),
      state('active',   style({transform: 'translateX(0) scale(1)'})),
      state('void',   style({transform: 'translateX(-100%) scale(0)'})),
      // transition('inactive => active', animate('100ms ease-in')),
      // transition('active => inactive', animate('100ms ease-out')),
      transition('void => inactive', [
        style({transform: 'translateX(-100%) scale(1)'}),
        animate(100)
      ]),
      transition('inactive => void', [
        animate(100, style({transform: 'translateX(100%) scale(1)'}))
      ]),
      transition('void => active', [
        style({transform: 'translateX(0) scale(1)'}),
        animate(200)
      ]),
      transition('active => void', [
        animate(200, style({transform: 'translateX(100%) scale(1)'}))
      ])
    ])
  ]

当元素进入dom时，它应该从左边来，而在离开时应该离开右边

状态更改为

void =>主动进入dom active =>无效的dom和

任何建议都会帮助

谢谢