It came to my attention that I was striving to develop an animation similar to the one in my Angular App. Here is my approach:
In app.component.html, enclose your router outlet within a div and place the elements you wish to animate above the router outlet but within the same parent.
<div class="position-relative" [@parentRoute]="getRouteAnimationData()" >
<div class="position-fixed Curtain" style="height:0%" ></div>
<router-outlet></router-outlet>
</div>
In app.component.ts, utilize ChildrenOutletContexts to extract data from the route snapshot for comparing previous and next routes, then use this data as input for your animation.
constructor(private contexts:ChildrenOutletContexts){}
getRouteAnimationData(){
return this.contexts.getContext('primary')?.route?.snapshot?.data?.['animation']
}
There are various approaches to creating animations akin to what you aim to achieve. I discovered that dividing the animation into two steps was most effective: The entrance animation (where the curtain comes down and displays your logo) and the exit animation (where the logo fades out, the curtain disappears, and the user transitions to the new route).
This can be accomplished through a combination of delays and animation sequences provided by the Angular animation engine. It is preferable to define animations in a separate file rather than in the template to enhance readability and promote reusability throughout the application.
Create a file named app.animation.ts, define a function for your route transition (e.g., closeOpenCurtain()), and export the trigger as a constant to be imported into components using the animation (in this case, parentRoute).
export const parentRoute =
trigger('parentRoute', [
transition('home => *', closeOpenCurtain()),
transition('contact => *', closeOpenCurtain()),
])
function closeOpenCurtain() {
return [
// Animation sequence details
]
I won't delve too deeply into triggers and complex animation sequences in Angular, as detailed documentation can be found on the website: https://angular.io/guide/complex-animation-sequences
However, I'll briefly explain the snippet above.
Basic styles :
Begin by setting basic styles on the parent template containing the router outlet. This ensures that Angular cleanly inserts the entering component beneath the existing component during route changes. By making the entering route absolute and invisible, the new route can smoothly enter the DOM without affecting layout. Similar principles apply to other variations of route transitions.
First sequence :
By grouping the first sequence, any animations within it run synchronously. It begins by animating the curtain's descent over 450ms with its height changing from 0% to 100%. To prevent the new route from appearing before the curtain fully descends, a delay of 450ms is added to the animation of the new route.
Second sequence :
Similar to the first sequence, the second sequence sets the curtain's height back to 0% and makes the previous route disappear by setting its opacity to 0.
The trigger :
The animation directive triggers whenever a route change occurs. In this case, I didn't want the animation triggering when the page reloads, so transitions only occur when the router-outlet navigates away from an existing route towards another route.
Ensure you declare your animation data in app-routing.module.ts to enable smooth transitions:
{
path: 'home', data:{animation: 'home'},
loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
},
{
path: 'contact', data:{animation: 'contact'},
loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule)
},
This animation will activate with browser navigation. For additional effects like fading in a logo, insert additional steps within the animation sequences targeting the logo's classname. There are numerous methods to implement this animation, but I believe this is the simplest way to achieve it.
I hope this guide enhances the visual appeal of your Angular applications!