Manage state of animation trigger in angular2 routing - angular2-routing

Question

I am faceing an issue with angular2 animation. App has a guide system where User navigate from step 1 to step 2 and so on. Now i have animation on routing where my first component slide to left and second come from right side and this is same for every step, this flow works very well but i want to reverse it when user go back to previous step then i want that current component should slide to right and previous component should slide in from left side.
animation.ts
import {trigger, state, animate, style, transition} from '#angular/animations';
export const routeAnimation =
trigger('routeAnimation', [
state('void', style({position: 'absolute', width: '100%', top: '150px', left: '20px'})),
state('*', style({position: 'absolute', width: '100%', top: '150px', left: '20px'})),
transition(':enter', [
style({transform: 'translateX(100%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
]),
transition(':leave', [
style({transform: 'translateX(0%)'}),
animate('0.5s ease-out', style({transform: 'translateX(-100%)'}))
])
]);
Components to animate while route
import {Component, HostBinding} from '#angular/core';
import {routeAnimation} from './animation';
import {state} from '#angular/animations';
#Component({
template: `<h1>first</h1>`,
animations: [routeAnimation]
})
export class FirstComponent {
#HostBinding('#routeAnimation') routerTransition = true;
}
#Component({
template: `<h1>second</h1>`,
animations: [routeAnimation]
})
export class SecondComponent {
#HostBinding('#routeAnimation') routerTransition = true;
}
#Component({
template: `<h1>third</h1>`,
animations: [routeAnimation]
})
export class ThirdComponent {
#HostBinding('#routeAnimation') routerTransition = true;
}
#Component({
template: `<h1>fourth</h1>`,
animations: [routeAnimation]
})
export class FourthComponent {
#HostBinding('#routeAnimation') routerTransition = true;
}
Thanks in advance.