Angular Route Transition - Slide left or right dependent on current route?

Question

I followed this tutorial to add route transition animations and it seems to work, but I am having more than 3 routes in my App. Now when I go to a page with animation: 'isRight' when I am currently on isLeft it works as expected, but when I am already on isRight and want to go to another page which is on the right of the current one, it does not show any transition at all.

How can I make a transition dependent on where I am currently? How do I know if I have to make a transition to left or to right?

That is an example for my routes:

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

That is my animation:

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

score 9 · Accepted Answer · edited Jun 22 '22 at 16:55

9

It's easy to do with :increment and :decrement transition selector values. You can define the routes with each route having animation property of data set to a numeric value in increasing order like below -

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

Then your transitions should be like -

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

Check out this stackblitz example. Please also refer to this angular document for all details.

edited Jun 22 '22 at 16:55

D M

5,769
4
12
27

answered Sep 11 '20 at 18:18

Akash

4,412
4
30
48

1

Thank you, that is exactly what I have looked for. – xDrago Sep 12 '20 at 16:47
add style({position: 'relative'}), before first query() if ur slider makes components go up/down btw – Mich May 15 '21 at 16:38
Perfectly completes the OP's solution. – CodeMylife Jan 23 '22 at 18:11

Angular Route Transition - Slide left or right dependent on current route?

1 Answers1