停止堆叠动画幻灯片

Question

我正在关注Angular2 docs来动画我的幻灯片，但遇到了幻灯片相互堆叠而不是滑过同一行的问题。我正在使用void => *和* => void让幻灯片平移并平移以响应点击事件。

@Component({
//metadata...
  animations: [
  trigger('flyOut', [
    transition('void => *', [
      style({transform: 'translateX(-100%)'}),
      animate(700)
    ]),
    transition('* => void', [
      animate(700, style({transform: 'translateX(100%)'}))
    ])
  ])
] 
})

问题在于，当动画发生时，新幻灯片将旧幻灯片向下推;所以当旧幻灯片穿过屏幕时，旧幻灯片会在新幻灯片下方结束。我认为这可能是一个样式问题，所以我将包含幻灯片的模板div更改为display: inline-block。但是，这并没有解决问题。我真的很感激任何帮助。

Plunker：https://plnkr.co/edit/PKDH9tDLHnjrK4flyK1A?p=preview