Angular 9 为步进组件设置动画

Question

我正在尝试创建一个可以（可能）拥有所需数量的子组件的组件。所以我创建了一个步进组件，它由两个组件组成，父组件 (Stepper) 和子组件 (Step)。它们的设计非常简单，步进器 html 看起来像这样：

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

步骤 html 如下所示：

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

在我的应用程序中，它稍微高级一些，但如果我保持简单，您就会明白:) 我在这里创建了一个 stackblitz：

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.%]，尽管它有效（并且不关心有多少步）但它不使用 angular 动画。我昨晚看了一些书，可以看到如何将变量传递给动画：

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

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

Angular 9 为步进组件设置动画

Angular 9 animate a stepper component

angular

angular-animations