Angular 2 inverts slide animation between routes when user clicks browser button

Question

I want to animate route changes using slide animations. When the user goes forward, the slide is from right to left, and when the user clicks the "Back" button, I want to return this animation by going from left to right.

But I do not know how to return the browser button event and trigger the reverse animation in routerPageTransition.

router-page.animations.ts

import {trigger, state, animate, style, transition} from '@angular/core'; export function routerPageTransition() { return slideToLeft(); } function slideToRight() { // This has the opposite animation of slideToLeft } function slideToLeft() { return trigger('routerPageTransition', [ transition('void => *', [ style({position:'absolute', width:'100%', height:'100%', transform: 'translateX(100%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})) ]), transition('* => void', [ style({position:'absolute', width:'100%', height:'100%', transform: 'translateX(0%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'})) ]) ]); } 

in each component:

 import { Component, OnInit } from '@angular/core'; import { routerPageTransition } from './../../router-page.animations'; @Component({ selector: 'test', templateUrl: './test.component.html', animations: [routerPageTransition()], host: {'[@routerPageTransition]': '' } }) export class TestComponent { /**************************** * Constructor ****************************/ constructor() { } } 

How can I process various animations in router-page.animations.ts to apply to components depending on the direction of navigation (forward or backward)?