动画中的Angular 4幻灯片

Question

所以我试图在 Angular 4 中制作一个类似旋转木马的动画，以便在表单页面中导航，但是当我触发幻灯片动画时，它们不是彼此相邻滑动，而是堆叠在顶部我尝试浮动 div2，制作 div2内联，它们同时滑动，这是期望的，但只是在彼此的顶部，因为我希望它们彼此相邻。 这是我的代码 .ts 文件中的动画

animations: [
trigger('slide', [
    transition(':enter', [
      style({
        transform: 'translateX(100%)',
      }),
      animate(400,
        style({
          transform: 'translateX(0)',
        })
      )
    ]),
    transition(':leave', [
      style({}),
      animate(400,
        style({
          transform: 'translateX(-100%)',
        })
      )
    ])
  ])
 ]

我的html

 <div id='container'>
         <div @slide *ngIf='index==0'></div>
         <div @slide *ngIf='index==1'></div>
         ....
</div>

Answer 1

尝试将 div 放在单独的容器中 希望对你有帮助

<div id='container'>
     <div @slide *ngIf='index==0'></div>
</div>

 <div id='container2'>
     <div @slide *ngIf='index==1'></div>
</div>