0

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

动画.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} 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;
}

提前致谢。

4

0 回答 0