angular - 如何在 Angular 2 中有条件地添加动画

Question

我有一个包含字段的表单组件，有些字段出现在表单中时我想设置动画，但不是每个字段。

<div *ngFor="let field of form.Fields">
    <div [ngSwitch]="field.Type" [@slideOut]>
        <!-- more field stuff -->
    </div>
</div>

使用其他属性我可以做这样的事情 [attr.required]="field.Required" 但是 [attr.@slideOut] 似乎不起作用.

理想情况下，我希望在我的 field 上有一个动画属性，这样我就可以像这样传递动画 [@field.Animation] 但我找不到任何关于我将如何做的文档像这样。有什么想法吗？

Answer 1

我遇到过类似的问题，发现您需要采取稍微不同的方法。

在 Angular 中，动画与状态相关联。因此，您不想在 HTML 中为动画定义不同的触发器，而是希望在组件类中定义触发器可以监视的多个状态。您可以设置动画链接到的对象的状态，而不是直接从方法触发动画。

例如，我可能会在导入必要的模块后在组件装饰器中定义以下内容。

@Component({
  selector: 'app-some-animated',
  templateUrl: './some.component.html',
  styleUrls: ['./some-animated.component.scss'],
  animations: [
    trigger('flyInOut', [
      transition("void => fly", [
        animate(300, keyframes([
          style({transform: 'translateX(100%)', opacity: 0}),
          style({transform: 'translateX(0)', opacity: 1})
        ]))
        ]
      )
    ]),
    trigger('flyInOut', [
      transition("void => fade", [
          animate(300, keyframes([
            style({opacity: 0}),
            style({opacity: 1})
          ]))
        ]
      )
    ])
  ]
})

在这个例子中，我让动画在元素被实例化时立即发生。在 ngOnInit() 方法中，我将 this.watchMe 设置为“fly”或“fade”。

在 html 中，我像这样附加 flyInOut 触发器:

<div [@flyInOut]="watchMe">
  Some content...
</div>

在您的情况下，您可能希望将所需状态添加到您的字段对象或作为 *ngFor 中的可迭代条件。

This article来自 courstro 的解释和视频也很好。