Javascript 停止堆叠动画幻灯片

我按照Angular2来制作幻灯片动画，但遇到了幻灯片彼此堆叠而不是在同一行上滑动的问题。我正在使用

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

。然而，这并没有解决问题。我真的很感激任何帮助

普朗克：