导致动画循环的角度动画回调

Question

按下此图像顶部的这些链接时，我希望主文本淡出，然后更改其内容，然后再淡回。

我的想法是：淡出完成后，调用一个函数来更改内容，然后切换我的布尔触发器。

问题是，当我尝试使用动画回调->（@ shift.end）->触发淡入时，动画将陷入无限循环，不断调用自身。

按下链接->淡出完成->（@ shift.end）更改文本并触发淡入->然后再次触发（@ 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>