Question

我正面临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%)'}))
    ])
]);

路线时要动画的组件从'@ angular / core'导入{Component，HostBinding};

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路由中的动画触发状态

0 个答案: