Angular 2 Animation 'void' => 'активное' состояние

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)'}))
      ])
    ])
  ]

когда элемент входит в дом, он должен идти слева, а при выходе из него должен выходить вправо

изменения состояния будут

void => active left to dom active => void dom to right и

любые предложения помогут

Спасибо