Angular: Disable animation on initial view / page load

Question

I have an Angular 4 component with a list of items. I followed the Angular documentation (https://angular.io/api/animations/animation) on setting up Enter and Leave animation when item is added or removed. But the same animation is played on all existing items in the list when the view is loaded. Is there a way to turn off animation on the initial view load but re-enable it after view is loaded?

This is so far the best solution. https://stackoverflow.com/a/49431624/3246527 — EdWood, Oct 11 '19 at 14:07

score 5 · Answer 1 · answered Feb 27 '18 at 15:56

5

You can define a dedicated animation state for added components.

Then you will have 3 transitions

void => * // Initial load - no animations
void => added // Animation for added components
* => void // Animation for removal of component

answered Feb 27 '18 at 15:56

Alexander Trakhimenok

6,019
2
27
52

Is "added" a special state automatically recognized by Angular or do I need to do something to add "added"? – Lazar Ljubenović Sep 17 '18 at 09:37
1

You would need to define CSS representation for the "added" state and then trigger the state. – Alexander Trakhimenok Sep 17 '18 at 21:06

ThaFog · Answer 2 · 2023-02-03T15:22:37.310

4

Just in case someone is looking for actual answer - if you have animation with :enter trigger, it can be done with @.disabled attribute like so:

<div @someAnimation [@.disabled]="animationDisabled"></div>

And then in component you just need to change the animationDisabled property to true after view is initialized:

@Component({
    // ...
})
export class SomeComponent implements AfterViewInit {
   
    animationDisabled: boolean = true;

    ngAfterViewInit(): void {
        this.animationDisabled = false;
    }

}

Now animation won't run on component init but will still work during component's lifetime

edited Feb 03 '23 at 15:22

answered Oct 12 '22 at 01:14

ThaFog

493
3
15

This is working, but it causes "Expression has changed after it was checked" while on `ng test`. – Bob der Baumeister Jul 27 '23 at 13:46
@BobderBaumeister then try to run it as a microtask: `queueMicrotask(() => { this.animationDisabled = false; });` – ThaFog Jul 30 '23 at 12:06

Angular: Disable animation on initial view / page load

2 Answers2