Angular 8旋转木马幻灯片动画不起作用

Question

我有3张图片，我需要从右向左滑动，下一张图片应该过渡。

我拥有STACKBLITZ

中要求的所有代码

HTML：

<ngb-carousel *ngIf="images" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
    <ng-template ngbSlide *ngFor="let image of images">
      <div class="picsum-img-wrapper">
        <img [src]="image" alt="Random slide">
      </div>
      <div class="carousel-caption">
        <button>Touch to start</button>
      </div>
    </ng-template>
  </ngb-carousel>

动画图像所需的角度动画：

animations: [
    trigger('slide', [
      state('previousLeft', style({
        display: 'none',
        transform: 'translateX(-100%)'
      })),
      state('previousRight', style({
        display: 'none',
        transform: 'translateX(100%)'
      })),
      transition('hidden => activeLeft, previousRight => activeLeft', [
        style({
          display: 'block',
          transform: 'translateX(100%)'
        }),
        animate('0.6s')
      ]),
      transition('hidden => activeRight, previousLeft => activeRight', [
        style({
          display: 'block',
          transform: 'translateX(-100%)'
        }),
        animate('0.6s')
      ]),
      transition('activeLeft => previousLeft, activeRight => previousRight,' +
                 'activeRight => previousLeft, activeLeft => previousRight,' +
                 'active => previousLeft, active => previousRight', [
        style({
          display: 'block'
        }),
        animate('0.6s')
      ])
    ])
  ],

我希望它的行为类似于以下内容： Another Stackblitz

任何帮助对于实现该功能都是非常有用的。

Answer 1

使用setTimeout（）做到这一点；

ngOnInit() {
  this.getData();
} 

private getData() : void {
  
  /*get Image*/
  let subscribe = this.imageService.getImage().subscribe(res => {
      
      this.imageList = res;
       
      setTimeout(() => {
        
        this.setEvent();
      }, 300)
        
    
  }, error => {
    
    console.log('error', error);
  
  }) 
  

}


private setEvent() : void {

  /*something slide event ex) swiper event...*/


}