角度路线动画,不为旧路线设置动画

时间:2019-12-14 04:16:47

标签: angular angular-animations

我对Angular路由动画进行了以下转换:

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


const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'project/:title', component: ProjectComponent },
  { path: 'about', component: AboutComponent, data: { animation: 'isRight' } }
];

它正在运行,但我想修改其某些行为:旧路线滑出,但我不希望它具有动画效果-我希望它保持在原位置并让新路线滑入结束。

我如何意识到这种行为?

0 个答案:

没有答案