Angular 2 invert slide animation between routes when user clicks on browser back button

Question

I want to animate routes changes with slide animation. When user goes forward, slide is from right to left, and when user clicks on browser back button I want to revert this animation, going from left to right.

But I don't know how get back browser button event click and call inverse 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 every 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 handle in router-page.animations.ts different animations to apply to components, based on direction of navigation (forward or back navigation) ?