add routering animation?

[natibs]

Is there a way to add support for animation in router-outlet? while on clean app animations work great, if I try to add animations to the router-outlet it's not working...

[iyilm4z]

@natibs this project uses this package written by @mledour. If i'm not wrong it already works between page transmissions and http request changes. Here its github repo and you have different spinners/loaders options.

But if you want something custom here is mine.

import { animate, state, style, transition, trigger } from '@angular/animations';

export function slideFromBottom() {
    return trigger('routerTransition', [
        state('void', style({ 'padding-top': '20px', opacity: '0' })),
        state('*', style({ 'padding-top': '0px', opacity: '1' })),
        transition(':enter', [
            animate('0.33s ease-out', style({ opacity: '1', 'padding-top': '0px' }))
        ])
    ]);
}

export function slideFromUp() {
    return trigger('routerTransition', [
        state('void', style({ 'margin-top': '-10px', opacity: '0' })),
        state('*', style({ 'margin-top': '0px', opacity: '1' })),
        transition(':enter', [
            animate('0.2s ease-out', style({ opacity: '1', 'margin-top': '0px' }))
        ])
    ]);
}

Here is how to use it in root module, component and template.

@NgModule({
    imports: [
        BrowserAnimationsModule, // add this module in root module
    ]
})
export class AppModule {
}

@Component({
    selector: 'my-comp',
    templateUrl: './my-comp.html',
    animations: [slideFromBottom()] // or slideFromUp()
})

<div [@routerTransition]>
   <!-- Your content is here -->
</div>

[natibs]

Well, I've tried the custom animation and it worked only on page loading, my question is for while navigating between router outlet components. (angular-loading-page worked fine as far as I could see)