21

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

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

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

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

4

2 回答 2

18

要有条件地启用或禁用动画触发器，请使用https://angular.io/api/animations/trigger#disabling-animations上记录的 [@.disabled]

以 OP 中的示例为例，如果每个字段都有一个带有布尔值的“必需”属性，并且动画应该只在这种情况下应用，代码可能是：

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

值得一提的是，在组件上使用 [@.disabled] 也会禁用任何子组件上的动画，例如，材质菜单的外观将不再具有动画效果。

必要时，可以通过使用条件将父动画上的动画持续时间设置为 0 来避免这种情况，这（视觉上）会移除动画，而不会影响任何子组件。

模板：

<div *ngFor="let field of form.Fields">
    <div [@slideOut]="field.required ? {value:'', params:{duration : 200}} : {value:'', params:{duration : 0}}">
        <!-- more field stuff -->
    </div>
</div>

动画：

trigger('slideOut', [
    transition(':enter', [
        style({ opacity: '0' }),
        animate('{{duration}}ms cubic-bezier(0.4, 0.0, 0.2, 1)'),
        style({ opacity: '1' })
    ])
])
于 2020-01-23T16:01:47.890 回答
18

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

在 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 的可迭代条件。

coursetro 的这篇文章也有很好的解释和视频。

于 2017-07-04T16:25:43.223 回答