Disable animation on initial view / page load : Angular

Question

I have added Enter and Leave animation in my Angular component. Where I am animating the height of a div based on a boolean variable. The animation is working fine but Is there a way to turn off animation on the initial view load?

Component.ts

    animations: [
            trigger('slideInOut', [
                transition(':enter', [
                    style({ height: '0', overflow: 'hidden', opacity: 0 }),
                    animate('200ms ease-in-out', style({ height: '*', opacity: 1 }))
                ]),
                transition(':leave', [
                    animate(
                        '200ms ease-in-out',
                        style({ height: 0, overflow: 'hidden', opacity: 0 })
                    )
                ])
            ])
    ]

Component.html

<div class="sidebar-sub-menu" *ngIf="isSubMenuOpen || setSubmenuActive" [@slideInOut]>
  ...
</div>

Does this answer your question? Angular: Disable animation on initial view / page load — Anbu Agarwal
– Anbu Agarwal, Commented Nov 13, 2023 at 19:45

Mohamed Karkotly · Accepted Answer · 2021-07-24 20:12:50Z

5

Use [@.disabled]="isPaused" on the element itself to prevent animation; where isPaused is a boolean variable that is equal to true.

In your case, you could initialize the isPaused variable to true in the constructor, and then it's your choice, either re-enable it using timeout like this

constructor() {
    this.isPaused= true;
    setTimeout(() => {
      this.isPaused= false;
    }, 1000);
}

Or you could assign it to true on a specific condition.

Hope this helped.

answered Jul 24, 2021 at 20:12

Mohamed Karkotly

1,5354 gold badges15 silver badges28 bronze badges

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

1 Comment

RAHUL KUNDU Over a year ago

It worked, I have enabled the animation in afterviewinit.

Collectives™ on Stack Overflow

Disable animation on initial view / page load : Angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related