Angular Анимация работает только при первом нажатии

Question

Анимация (translateX) работает только при первом нажатии. См. Пример stackblitz. Как я могу заставить его работать каждый щелчок? Спасибо

https://stackblitz.com/edit/angular-ivy-p9strz

Answer 1

Вы можете использовать Angular обратный вызов анимации , чтобы прослушать (@block.done), а затем обновить начальное translateX элемента.

Код компонента должен выглядеть так:

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  animations: [
    trigger("block", [
      state(
        "initial",
        style({
          transform: "translateX({{offset}}px)"
        }),
        { params: { offset: 0 } }
      ),
      state(
        "slide",
        style({
          transform: "translateX({{distance}}px)"
        }),
        { params: { distance: 100 } }
      ),

      transition("initial => slide", animate("900ms")),
      transition("slide => initial", animate("0ms"))
    ])
  ]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  carouselState;
  slideDistance;
  counter = 0;
  offset = 0;

  moveBlock() {
    this.counter++;
    this.slideDistance = 100 * this.counter;
    this.carouselState = "slide";
  }

  onAnimationDone() {
    setTimeout(() => {
      this.offset = this.slideDistance;
      this.carouselState = 'initial';
    });
  }
}

и ваш шаблон вроде этого:

<div class="block" 
  (@block.done)="onAnimationDone()"
  [@block]="{value: carouselState, params: {distance: slideDistance, offset: offset }}">
</div>

Обратите внимание, что я заключил обновление offset в setTimeout, чтобы отложить его до следующего тика. Вы можете найти обновленный stackblitz здесь