我正在面对angular2动画的问题 . 应用程序有一个指南系统，用户从步骤1导航到第2步，依此类推 . 现在我有路由动画，其中我的第一个组件向左滑动，第二个组件从右侧滑动，这对于每个步骤都是相同的，这个流程非常好但我想在用户返回上一步时将其反转然后我想要当前组件应向右滑动，之前的组件应从左侧滑入 .

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

路径导入时动画的组件{Component，HostBinding}来自'@ 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;
}

提前致谢 .

angular2-routing angular2-animation