动画卡片在 Angular 中进入和离开 left/right 2+

Question

我有一个组件，用户应该能够在其中使用左右箭头键筛选项目列表，并真正明确用户的前进方向，我想使用动画。我已经设法为用户进行的第一次交互添加了动画，但除此之外动画没有应用，我将提供一个 stackblitz 解决以下问题：

https://stackblitz.com/edit/angular-ivy-7h2sdp?file=src/app/app.component.html

如示例所示，如果您在应用动画后输入右键，如果您按右键然后用左键返回，它也可以正确应用，但如果您在同一方向重复多次，它就会停止应用但我分配了触发器正在检查的方向变量所以在我看来它应该在你每次按下键时应用？我猜我在应用动画时有些地方不明白。

如有任何帮助，我们将不胜感激！

Answer 1

触发器会在发现有界变量发生一些变化时触发。

Trigger:- Creates a named animation trigger, containing a list of state() and transition() entries to be evaluated when the expression bound to the trigger changes.

在给定的例子中 this.direction 没有改变（例如，如果用户多次按下 right/left 键），所以动画不会触发。

重置 this.direction 变量并调用 changedetector 应该可以。

 keyEvent(event: KeyboardEvent) {
    this.direction = ""; //resetting varibale
    this.cd.detectChanges(); //run change detection cycle
    if (event.key === "ArrowRight") {
      this.moveRight();
      this.currentItem = this.items[this.index];
      this.direction = "fromRight";
    }

    if (event.key === "ArrowLeft") {
      this.moveLeft();
      this.currentItem = this.items[this.index];
      this.direction = "fromLeft";
    }
    this.count++;
  }

动画卡片在 Angular 中进入和离开 left/right 2+

Animate cards to enter and leave left/right in Angular 2+

css-animations

angular

angular-animations