How to add fade-in animation to Angular <router-outlet> on route change?

I have html component:

<section
class="flex flex-col w-full h-[100vh] overflow-hidden animate__animated animate__fadeIn"
>
<!-- Top navbar remains fixed at the top and does not shrink -->
<app-top-navbar class="flex-shrink-0"></app-top-navbar>

<!-- Main content area with side navbar and dynamic content -->
<div class="h-full flex overflow-hidden">
<!-- Side navbar remains fixed in width and does not grow or shrink -->
<app-side-navbar class="w-[10%] flex-shrink-0"></app-side-navbar>

<!-- Content area that can expand and scroll independently -->
<div class="w-full flex flex-col relative h-full overflow-y-auto">
<p class="p-3 drop-shadow-md text-gray-800 font-semibold">
{{ sectionTitle }}
</p>
<!-- Centered router-outlet container that can grow vertically -->
<div class="flex items-center justify-center h-full">
<router-outlet></router-outlet>
</div>

<!-- Bottom navigation positioned at the bottom of the content area -->
<app-overview-nav
[back_router_link]="back_router_link"
[next_router_link]="next_router_link"
></app-overview-nav>
</div>
</div>
</section>


when it is loaded, the whole page is animated using fadeIn animation. But i want to animate also

<div class="flex items-center justify-center h-full">
<router-outlet></router-outlet>
</div>


so every time the router outlet changes, it also has animate__animated animate__fadeIn animation.

I tried using animate__animated animate__fadeIn on router-outlet, but it doesnt work.

Continue reading...