Add different animation depending on the previous route page

Question

I need a component(brand name) to animate based on the previous route in angular. That is when the previous route is home then the component should be loaded from right, and if the previous route is brand model then the component should be loaded from left. I want to add code to animate, in the component itself.

I could get the previous route in the component using the service

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class RouteService {

 private previousUrl: string;
 private currentUrl: string;

 constructor(private router: Router) {
   this.currentUrl = this.router.url;
   router.events.subscribe(event => {
     if (event instanceof NavigationEnd) {
       this.previousUrl = this.currentUrl;
       this.currentUrl = event.url;
     }
   });
 }

 public getPreviousUrl() {
   return this.previousUrl;
 }
}

But not able to animate after loading the page. Is there any way to achieve this?

Answer 1

General information: Your animations need some states, wich can be used to either transform your page to the left or the right. The information about the navigation-direction is provided hopefully by the router. This always depends on how you implemented your browser internal.

Idea 1:

Get the animation-direction by checking the amount of routing params and compare them with the previous ones (Find the amount of / in your path).

Idea 2:

Fill in the router with extra informations

Animation implementation:

state('neutral', style({transform: 'translateX(0%)'}),
state('up',  style({transform: 'translateX(-100%)'}),
state('down',  style({transform: 'translateX(100%)'}),
transition('neutral => up', animate('500ms')),
transition('up => neutral', animate('500ms')),
transition('neutral => down', animate('500ms')),
transition('down => neutral', animate('500ms'))