是啥导致我的动画在第一次播放后失败？

Posted 2023-03-13

【中文标题】是啥导致我的动画在第一次播放后失败？

【英文标题】：What is causing my animation to fail on plays after the first?是什么导致我的动画在第一次播放后失败？

【发布时间】：2021-06-06 00:03:58

【问题描述】：

我的目标是从 Angular Material 组件库中重新实现 mat-tab。

使用L 和R 按钮，我正在播放调整按钮集合上left 样式的动画。我遇到的问题是每个动画只能播放一次。例如，我可以遍历位置right from 0 to 1，然后遍历left from 1 to 0 - 但如果我尝试再次遍历right from 0 to 1，则不会发生任何事情。所有动画都可以在数组中引用，并且在创建后不会被更改 - 那么为什么当我重用它们时行为会发生变化？

StackBlitz

【问题讨论】：

请在您的问题中直接放一个最小的可重现示例，请参阅 [link]***.com/help/minimal-reproducible-example

【参考方案1】：

不幸的是，由于我还没有过多使用 Angulars 动画，因此我无法提出一个可行的解决方案，但是对于您的问题：动画正在使用状态来处理转换，并且在您提供的示例中，每个动画都只能工作每次播放后都会进入完成状态。

我尝试过，但它只是部分工作，是在移动到另一个方向时重置动画。这适用于位置 0 => 1 和 1 => 0，但如果你移动到位置 2，你只能回到位置 1 而不是 0 - 不知道为什么。

public slideLeft(): void 
  console.log(`sliding from $this.position to $this.position - 1`);
  if (this.position > 0) 
    console.log(`playing left animation at $this.position`);
    let animation = this.leftAnimations[this.position];
    animation.play();
    this.position -= 1;

    // in slideRight use leftAnimations
    this.rightAnimations.forEach(a => a.reset());

    /* also tried it like that
    const pos = this.position;
    animation.onDone(() => 
      console.log(`resetting right animation at $pos`);
      this.rightAnimations[pos].reset();
    );
    */

也许更好的解决方案是为每个步骤定义一个状态，并为每个步骤定义一个转换，这样您就可以使用一个变量来定义您的动画所处的状态。您需要找到一种方法，如何以编程方式将变量绑定到动画状态，这通常由 [@animationName]="variable" 完成。

【讨论】：

感谢您试一试。我仍在调查此问题，并在解决后发布我的发现。