How to conditionally add animations in Angular 2

Question

I have a form component that has fields, some fields I want to animate when they appear in the form, but not every field.

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

With other attributes I can do something like this [attr.required]="field.Required" But [attr.@slideOut] doesn't seem to work.

Ideally I would like to have an animation property on my field so I could pass in animations like this [@field.Animation] but I can't find any documentation on how I would do anything like this. Any ideas?

Answer 1

I've come up against a similar problem and found that you need to take a slightly different approach.

In Angular, animations are linked to state. So instead of defining a different trigger for your animation in your HTML, you want to define multiple states that your trigger can watch for in your component class. And rather than triggering animations directly from a method, you set the state of the object an animation is linked to.

So for instance I might define the following in the component decorator after importing the necessary modules.

@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})           ]))         ]       )     ])   ] }) 

In this instance I'm making the animations happen as soon as the element is instantiated. And in the ngOnInit() method I'm setting this.watchMe to "fly" or "fade".

In the html I'm attaching the flyInOut trigger like so:

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

In your case you probably want to add the required state to your field objects or as an iterable condition from your *ngFor.

This article from coursetro has a nice explanation and a video too.

Answer 2

To conditionally enable or disable an animation trigger, use [@.disabled] as documented on https://angular.io/api/animations/trigger#disabling-animations

Taking the example in the OP, if each field has a property 'required' with a boolean value and an animation should only be applied where this is true, the code might be:

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

It's worth saying that using [@.disabled] on a component will also disable animations on any child components, e.g. the appearance of a material menu will no longer be animated.

Where necessary, this can be avoided by instead using a conditional to set the duration of the animation on the parent animation to 0, which (visually) removes the animation, without impacting any child components.

Template:

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

Animation:

trigger('slideOut', [     transition(':enter', [         style({ opacity: '0' }),         animate('{{duration}}ms cubic-bezier(0.4, 0.0, 0.2, 1)'),         style({ opacity: '1' })     ]) ])