Angular Animations slide in won't work, just appears

Question

I'm trying to implement a route transition, a slide in, using Angular Animations.

The transitions kind of works - it won't slide in, but slide out. The slide in feels like a lag, it just appears. How so?

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


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

score 0 · Answer 1 · answered Dec 13 '19 at 04:29

Here's a slide in/out router animation that I created:

// router-animation.ts

import { trigger, transition, style, query, group, animateChild, animate, keyframes, } from '@angular/animations';

export const slider =
trigger('routeAnimations', [
    transition('isRight => isLeft', slideTo('left') ),
    transition('isLeft => 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]: '-110%'})
    ]),
    group([
    query(':leave', [
        animate('600ms ease', style({ [direction]: '110%'}))
    ], 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()),
];
}

And on the routing module:

// app-routing.module.ts

const routes: Routes = [
    { path: '', redirectTo: 'route-1', pathMatch: 'full' },
    { path: 'route-1', component: Route1Component, data: { animation: 'isLeft'} },
    { path: 'route-2', component: Route2Component, data: { animation: 'isRight'} },
    { path: 'route-3', component: Route3Component }
];

In the app.component.html file:

<!-- app.component.html -->

<div [@routeAnimations]="prepareRoute(outlet)">
    <router-outlet #outlet="outlet"></router-outlet>
</div>

Finally in the app.component.ts file:

// app.component.ts

prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}

You can check it out in a StackBlitz here.

Angular Animations slide in won't work, just appears

1 Answers1