我对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' } }
];
它正在运行,但我想修改其某些行为:旧路线滑出,但我不希望它具有动画效果-我希望它保持在原位置并让新路线滑入结束。
我如何意识到这种行为?