Angular 设置卡片动画，使其在角度2+中左/右进出；

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

如示例中所示，如果在应用动画后输入rightkey，如果使用left key前后移动，则也会正确应用，但如果在同一方向上多次执行，则会停止应用，但我指定了触发器正在检查的方向变量，因此在我看来，它应该在每次点击鼠标时应用钥匙我猜在应用动画时，有些东西我不理解

---

任何帮助都将不胜感激

触发器将在看到有界变量中的某些更改时触发

触发器：-创建一个命名的动画触发器，其中包含状态（）和 当表达式绑定到 触发变化

---

在给定的示例中，此方向不会改变（例如，如果用户多次按右/左键），因此动画不会触发

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

---

此.direction不会为同一方向更改，因此动画不会触发。我做了一些改变，请你看一下谢谢你的帮助！如果你把它作为一个答案，我会接受它，因为它现在的工作预期。