角度动画仅可在第二个滑块图像上正常工作

Question

<ngx-slick-carousel class="carousel"  class="lazy slider" 
      #slickModal="slick-carousel" 
      (afterChange)="afterChange($event)"  [config]="slideConfig"
      >
        <div ngxSlickItem *ngFor="let slide of slides" class="slide">
          <h1 [@sl]="state">{{slide.txt}}{{slickModal.currentSlide}}</h1>
          <figure><img src="{{slide.img}}" width="509" alt="responsive websites" class="img-responsive"></figure>
        </div>
      </ngx-slick-carousel>

打字稿

每当图像改变时都会触发afterChange，因此最初我将其设置为正常。 问题是文本按照transform：'translateX（100px）'的定义移动了100px。文本向右移动100px的动画仅在第二幅图像用于第三幅图像且第一幅图像的文本已经向右（x）100px的情况下起作用，因此不会发生动画。从第三张图片到第一张图片相反，对于第一张图片，文本最初已经在右侧，然后文本从右移到左，从'translateX（100px）'到'translateX（0）'

我希望动画在每次图像更改时都发生。我想我需要在动画触发器之后而不是afterchange之后立即重置状态。

export class HomeComponent implements OnInit {

state = 'normal';

  slides = [
    {img: "theme/images/home01.jpg", txt: 'sssssssssssssss'},
    {img: "theme/images/home02.jpg", txt: 'ddddddddddddddddd'},
    {img: "theme/images/home03.jpg", txt: 'dsssssssssss'}
  ]
  slideConfig = {autoplay: true,"slidesToShow": 1, "slidesToScroll": 1, speed:800, "autoplaySpeed": 3000, cssEase: 'cubic-bezier(0.250,  0.060, 0.050, 0.040)'};

   ngOnInit() { }

    afterChange(event) {
   this.state = 'normal';
    if(event.currentSlide == 0) {
      this.state = 'active';
      console.log(this.state);
    }
    if(event.currentSlide == 1) {
      this.state = 'active';
      console.log('second'+ this.state);
    }
    if(event.currentSlide == 2) {

      this.state = 'active';
      console.log(this.state);
    }
  }