小编Fab*_*lli的帖子

我想用幻灯片动画为路线变化添加动画效果.当用户前进时,幻灯片从右向左滑动,当用户点击浏览器后退按钮时,我想恢复此动画,从左到右.

但我不知道如何获取浏览器按钮事件点击并在routerPageTransition中调用反向动画.

路由器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%)'}))
    ])
  ]);
}

在每个组成部分:

import { Component, OnInit } from '@angular/core';
import { routerPageTransition } from './../../router-page.animations'; …