Угловая обратная связь анимации, вызывающая цикл анимации

Question

Когда нажаты эти ссылки в верхней части этого изображения, я хочу, чтобы основной текст исчез, затем я изменил его содержание, а затем вернулся обратно.

моя мысль: когда исчезаетout завершается, вызывает функцию для изменения содержимого и переключает мой логический триггер.

Проблема заключается в том, что когда я пытаюсь использовать анимационный обратный вызов -> (@ shift.end) -> для запускаПоявление, анимация перейдет в бесконечный цикл, постоянно вызывая себя.

Ссылка нажата -> исчезновение завершено -> (@ shift.end) изменяет текст и запускает fadein ->, который затем запускает (@shift.end) снова вызывая цикл.

Если вам будет трудно с этим, любая помощь будет принята с благодарностью

Воткод:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass'],
  animations: [
    trigger('shift', [
      state('fadeout', style({
        opacity: 0,
      })),
      state('fadein', style({
        opacity: 1,
      })),
      transition('fadeout => fadein', [
        animate('0.25s')
      ]),
      transition('fadein => fadeout', [
        animate('0.25s')
      ]),
    ]),
  ]
})

  endAnim(event){
    this.shifting = !this.shifting;
    console.log("End of animation");
  }

HTML

<div [@shift]=" shifting ? 'fadeout' : 'fadein' " (@shift.end)="endAnim($event)" class="promo-content">
    <h1 class="promo-head t-iron t-4">{{ content.head }}</h1>
    <p>{{ content.text }}</p>
  </div>