CODEWITHSUNDEEP
angularanimation
Victor Mukherjee
Victor Mukherjee

Reputation: 11045

Angular animate on property change

I have a custom navigable panel for a list of items. The panel contains one databound component, surrounded by two buttons for navigating to previous and next data. The databound component displays the currently active data. Now, I wish to show some animation when the data object changes. I am new with angular animation and finding it hard to find an example that suits my scenario. How can I trigger an animation when an @Input() property value changes?

Upvotes: 4

Views: 3096

Answers (2)

Saksham
Saksham

Reputation: 9380

Answering to your question

How can I trigger an animation when an @Input() property value changes?

You can have an input property in a child component as

Input() FadeDirection: string = "FadeFromRight";

and use this input property as a state to assign to the animation trigger as

[@animatecomponent]="FadeDirection"

and for a set of discrete states, define the transition effects as

transition('void => FadeFromRight', [ ... ])

Sample created at https://stackblitz.com/edit/angular-routes-animations

Upvotes: 1

Frederick
Frederick

Reputation: 872

If you're not talking about router animations, I think you'll have to maintain an animation state using an @Input() setter and the animations done function. Example here https://stackblitz.com/edit/angular-lmmixg

Child component ts:

  @Input() set data(data: any) {
    this.dataState = 'entering';
    this._data = data;
  }

  get data() { return this._data };

  _data: any;

  dataState: 'entering' | 'done' = 'done';

Child component html:

<div [@dataChange]="dataState" (@dataChange.done)="dataState = 'done'">{{ data }}</div>

Animation ts:

export const dataChange: AnimationTriggerMetadata = trigger('dataChange', [
    transition('done => entering', [
        style({
            'margin-left': '90%'
        }),
        animate('200ms ease',
            style({ 'margin-left': '*' }))
    ]),
]);

Upvotes: 4

Related Questions