Angular 角度路线过渡-根据当前路线向左或向右滑动？

我按照教程添加了路线过渡动画，看起来效果不错，但我的应用程序中有3条以上的路线。现在，当我进入一个带有

动画的页面时，当我当前处于
isLeft
时，“isRight”

会按预期工作，但当我已经处于

isRight

并希望转到当前页面右侧的另一个页面时，它根本不会显示任何转换

如何根据我目前的位置进行转换？我怎么知道我是要向左转还是右转

这是我的路线的一个例子：

const routes: Routes = [
  { path: 'page1', component: Page1Component, data: {animation: isLeft} },
  { path: 'page2', component: Page2Component, data: { animation: 'isRight' } },
  { path: 'page3', component: Page3Component, data: { animation: 'isRight' } },
  { path: 'page4', component: Page4Component, data: { animation: 'isRight' } },
  { path: 'page5', component: Page5Component, data: { animation: 'isRight' } },
  { path: 'page6', component: Page6Component, data: { animation: 'isRight' } },
];

这就是我的动画：

export const slider =
    trigger('routeAnimations', [
        transition('* => isLeft', slideTo('left')),
        transition('* => isRight', slideTo('right')),
        transition('isRight => *', slideTo('left')),
        transition('isLeft => *', slideTo('right'))
    ]);

function slideTo(direction) {
    const optional = { optional: true };
    return [
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                [direction]: 0,
                width: '100%'
            })
        ], optional),
        query(':enter', [
            style({ [direction]: '-100%'})
        ]),
        group([
            query(':leave', [
                animate('600ms ease', style({ [direction]: '100%'}))
            ], optional),
            query(':enter', [
                animate('600ms ease', style({ [direction]: '0%'}))
            ])
        ]),
        // Normalize the page style... Might not be necessary

        // Required only if you have child animations on the page
        query(':leave', animateChild()),
        query(':enter', animateChild()),
    ];
}

---

使用

：递增

和

：递减

转换选择器值很容易。您可以定义路由，每个路由的

动画

数据属性按如下递增顺序设置为数值-

const routes: Routes = [
  { path: 'one', component: CompOneComponent, data: { animation: 0 } },
  { path: 'two', component: CompTwoComponent, data: { animation: 1 } },
  { path: 'three', component: CompThreeComponent, data: { animation: 2 } },
  { path: 'four', component: CompFourComponent, data: { animation: 3} },
];

那么你的

转换应该是-

trigger('routeAnimations', [
    transition(':increment', slideTo('right') ),
    transition(':decrement', slideTo('left') ),
  ]);

退房。有关所有详细信息，请参阅。
谢谢，这正是我要查找的内容。请在第一次查询（）之前添加样式（{position:'relative'}），前提是您的滑块使组件向上/向下移动