在 Angular 2+ 中动画卡进入和离开左/右答案

【问题标题】：Animate cards to enter and leave left/right in Angular 2+在 Angular 2+ 中动画卡进入和离开左/右
【发布时间】：2021-01-07 20:00:17
【问题描述】：

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

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

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

任何帮助将不胜感激！

【问题讨论】：

this.direction 不会改变相同的方向，所以动画不会触发。我做了一些修改，你可以看看吗stackblitz.com/edit/…
感谢您的帮助！如果你把它作为答案我会接受它，因为它现在可以按预期工作。

标签： angular css-animations angular-animations

【解决方案1】：

当看到有界变量发生一些变化时，触发器会触发。

Trigger:- 创建一个命名的动画触发器，包含 state() 和当表达式绑定到触发更改。

在给定的示例中 this.direction 没有改变（例如，如果用户多次按下右/左键），因此动画不会触发。

重置 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++;
  }

【讨论】：