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>

Answer 1

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.