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. stackoverflow.com/a/49431624/3246527 — EdWood
– EdWood, Commented Oct 11, 2019 at 14:07

ThaFog · Accepted Answer · 2023-02-03 15:22:37Z

6

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 3, 2023 at 15:22

answered Oct 12, 2022 at 1:14

ThaFog

5294 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bob der Baumeister Over a year ago

This is working, but it causes "Expression has changed after it was checked" while on ng test.

ThaFog Over a year ago

@BobderBaumeister then try to run it as a microtask: queueMicrotask(() => { this.animationDisabled = false; });

Gustavo López Frutos Over a year ago

@BobderBaumeister You can just change the value OnInit with setTimeOut: @Component({ // ... }) export class SomeComponent implements OnInit { animationDisabled: boolean = true; ngOnInit(): void { setTimeout(()=> this.animationDisabled = false); } }

Alexander Trakhimenok · Accepted Answer · 2018-02-27 15:56:06Z

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, 2018 at 15:56

Alexander Trakhimenok

6,3282 gold badges31 silver badges53 bronze badges

2 Comments

Lazar Ljubenović Over a year ago

Is "added" a special state automatically recognized by Angular or do I need to do something to add "added"?

Alexander Trakhimenok Over a year ago

You would need to define CSS representation for the "added" state and then trigger the state.

Collectives™ on Stack Overflow

Angular: Disable animation on initial view / page load

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest