Angular 9 为步进器组件设置动画答案

【问题标题】：Angular 9 animate a stepper componentAngular 9 为步进器组件设置动画
【发布时间】：2020-04-20 23:37:56
【问题描述】：

我正在尝试创建一个组件，该组件可以（可能）根据需要拥有尽可能多的子组件。所以我创建了一个步进器组件，它由两个组件组成，父级（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 Animations，但我不知道如何将变量传递给它（或者即使你可以！）我声明了这个动画：

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

但正如您所见，这只适用于 2 个步骤.... 有人可以帮忙吗？

【问题讨论】：

最后一步你想让我做什么？从一开始就得到它？
像这个例子eljallo.herokuapp.com一样工作，是用角度制作的

标签： angular angular-animations

【解决方案1】：

我已经设法把它调整到一个合理的状态。

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

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

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

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

【讨论】：