Angular custom complex router transitions - html

Question

Currently I'm trying to implement some route transition. To do so, I'm using a component that is being displayed on click calling its respective service's function:
routeTransition(destination) {
if (this.router.url !== destination) {
this.ls.startLoading(destination)
}
}
startLoading(destination) {
if (this.loading.getValue() === 0) {
this.loading.next(1);
setTimeout(() => {
this.router.navigate([destination]);
}, 750)
}
}
As you can see I kind of delay the navigation - I do so, since my route transition is a black div easing in from the bottom - I timed the navigation to change the route just when the screen is covered. Afterwards, inside of the new component, I call the service's stopLoading function, which hides the transitioning div again by easing out.
That's the transition I'm talking about:
It works, but I reckon that's not the prefect way, since it won't work when the user's navigating back. What's the correct approach to implement such a transition? Is this possible using Angular's browser animations?

Answer 1

Using a setTimeout is indeed a bad thing because this is approximate.
Angular can provide animation especially for the router transitions.
You can add a directive to your router outlet to trigger an Angular animation on page change.
For example on your app.component.html:
<div [#routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
app.component.ts
public prepareRoute(routerOutlet: RouterOutlet): string {
return routerOutlet && routerOutlet.activatedRouteData && routerOutlet.activatedRouteData[ 'animation' ];
}
In this example, the prepareRoute will use the animation name directly from your route custom data by using the property animation.
This way, it allows to have animation only on specific pages.
You also have to register inside the component the animations.
#Component({
animations: [
PAGES_ANIMATION
],
Then define the type of animation between your routes.
export const PAGES_ANIMATION = trigger('routeAnimations', [
transition(`home => register`, SLIDE_RIGHT_ANIMATION),
transition(`register => home`, SLIDE_LEFT_ANIMATION),
And finally, create an Angular animation.
export const SLIDE_RIGHT_ANIMATION = [
style({
position: 'relative'
}),
query(':enter, :leave', [
style({
height: '100vh',
left: 0,
overflowY: 'hidden',
position: 'absolute',
top: 0,
width: '100%'
})
]),
query(':enter', [
style({
transform: 'translateX(100%)'
})
]),
query(':leave', animateChild()),
group([
query(':leave', [
animate('400ms ease-out', style({
transform: 'translateX(-100%)'
}))
]),
query(':enter', [
animate('400ms ease-out', style({
transform: 'translateX(0%)'
}))
])
]),
query(':enter', animateChild())
];
If this is a correct answer for you but you can not make it, ask me for help.
You can also read the documentation to understand the concepts and see a real world example.

Answer 2

It turns out I was attempting to create an animation exactly like that in my Angular App. My solution is as follows :
in app.component.html, wrap your router outlet within a div and add the elements you want 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 , inject ChildrenOutletContexts to get your data from the route snapshot to compare previous and next routes and return that data as input for your animation
constructor(private contexts:ChildrenOutletContexts){}
getRouteAnimationData(){
return this.contexts.getContext('primary')?.route?.snapshot?.data?.['animation']
}
There are many ways to go about creating animation similar to the one you are trying to achieve. I found that the easiest way was to separate the animation in 2 steps : The entrance animation (This is where the curtain comes down, and shows your logo ), and the exit animation (This is where the logo fades out, then the curtain disappears, and the user finds himself on the new route).
This can be easily achieved by using a combination of delays and animation sequences provided by the angular animation engine. It's cleaner to write your animations in a separate file instead of in the template to improve readability and allow reusability throughout the app.
create a file called app.animation.ts, and declare a function that will be used for your route transition (in this case, closeOpenCurtain()), and export the trigger as a const that will be imported into the components which will use the animation (In this case, parentRoute)
export const parentRoute =
trigger('parentRoute', [
transition('home => *', closeOpenCurtain()),
transition('contact => *', closeOpenCurtain()),
])
function closeOpenCurtain() {
return [
// Set basic styles so the DOM cleanly removes/inserts the old and new route
style({position:'relative', overflow:'hidden'}),
query(':leave',[
style({opacity:1})
],{optional:true}),
query(':enter',[
style({position:'absolute',top:0,left:0,width:'100%'})
], {optional:true}),
// First sequence
// Descend the curtain upon the viewport, and delay the opacity of the new
// route until the curtain has fully descended
group([
query('.Curtain',[
animate('450ms cubic-bezier(0.87, 0, 0.13, 1)', style({ height: '100%' })),
], {optional:true}),
query(':enter', [
style({ opacity: 0 }),
animate('1ms 450ms', style({ opacity: 1 }))
], { optional: true }),
]),
// Second sequence
// Make old route disappear immediately, then
// slide the curtain out of the viewport
group([
query(':leave', [
style({opacity:0})
//animate('1ms', style({ opacity: 0 }))
], { optional: true }),
query('.Curtain',[
animate('450ms cubic-bezier(0.87, 0, 0.13, 1)', style({ height: '0%' })),
], {optional:true}),
])
]
}
I will not go too much into detail about how triggers and complexe animation sequences work in angular, as you can find all the documentation for it on the website : https://angular.io/guide/complex-animation-sequences
However, I will briefly describe what is happening in the above snippet.
Basic styles :
First, you set basic styles on the parent template which contains the router outlet. Angular always inserts the entering component directly beneath the existing component during on route change. by setting the entering route as absolute and invisible allows the new route to enter the DOM cleanly without affecting the layout during the transition. This will be more or less similar in other variations of a route transition.
First sequence :
By creating the first sequence as a group, you allow any animation declared within the group to run synchronously. First, we query the element we wish to animate, in this case, we reference the .Curtain. The curtain will descend upon the screen for 450ms as it's height animate from 0% to 100%. To prevent the new route from appearing before the curtain has descended, we animate the new route with a delay of 450ms (to give enough time for the curtain to have descended before showing the new route).
Second sequence (begins after the first sequence has completed) :
The second sequence is similar to the first one, only that it sets the curtain's height back to 0%, and makes the previous route disappear by setting it's opacity to 0.
the trigger :
The animation directive will be triggered whenever the route changes, in my case, I did not want the animation to trigger when the page reloads. In order to prevent this, I allow the transition to detect when the router-outlet is navigating "away" from an existing route, regardless of the route it navigates towards.
Finally, make sure you declare your animation data within your app-routing.module.ts to allow your transitions to work :
{
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)
},
The above animation will work when you use your browser's navigation. If you want to add the extra bit where your logo fades in, add an extra step in the first and/or second sequence by querying that logo's class name. There are many ways to make this animation work, but I sincerely believe this is the easiest way to get it done.
I hope this helps you make your angular apps look even more awesome !