Angular 9为步进器组件制作动画

Question

我正在尝试创建一个组件，该组件可以（可能）具有所需的多个子代。因此，我创建了一个stepper组件，该组件由两个组件组成：父组件（Stepper）和子组件（Step）。它们的设计非常简单，步进html如下所示：

<div class="panes">
    <ng-content></ng-content>
</div>

和步骤html看起来像这样：

<div [ngClass]="{'expanded': expanded}"><ng-content></ng-content></div>

在我的应用程序中，它稍微先进了一些，但是如果我保持简单，您将会明白的：)我在这里创建了一个堆叠闪电战：

https://stackblitz.com/edit/angular-jsj2na

现在我有了步进器，我想创建一些动画。有几种方法可以做到这一点，但是我从这个想法开始：

https://stackblitz.com/edit/angular-pkgh4v

这以粗略的方式起作用，但是没有考虑n +个步骤。我很想使用Angular动画，但是我不知道如何将变量传递给它（甚至可以！）。我声明了此动画：

trigger('slide', [
  state('left', style({ transform: 'translateX(0)' })),
  state('right', style({ transform: 'translateX(-50%)' })),
  transition('* => *', animate(300)),
]),

但是如您所见，这仅适用于2个步骤。...谁能帮忙？

Answer 1

我设法使它达到一个合理的状态。

https://stackblitz.com/edit/angular-4psjsm

如您所见，我设法使用了[style.transform]和[style.width.%]，尽管它可以工作（并且不在乎有多少步），但它没有使用角度动画。昨晚我读了一些书，可以看到如何将变量传递给动画：

https://medium.com/@danieltamirr/parameterized-angular-animations-fa73a2727158

但是我的问题是如何规定实际的动画。如果有人可以帮助您，那么我会将其标记为答案