Animating nested router-outlet

animation

#1

Hi,

I have been trying to get transition animations working for a nested router outlet, but so far have been unsuccessful. Can any help?

This is what I have:

<!-- some UI here -->
...
<router-outlet name="some-name"></router-outlet>
...
<!-- some more ui -->

Then I have set up correct router to display some different content in the “some-name” router outlet. The content in the outlet changes correctly, but I would like to add transitions for it when the content in it changes.

Does anyone have any suggestions?

Thanks
Grey


#2

I got it working by importing NativeScriptAnimationsModule from “nativescript-angular/animations”, and using it as a dependency. Then I used angular animations to make the view transition.


#3

Would it be possible if you could post a more detailed solution on how you’d actually implemented it? Thanks


#4

I used Angular animations for it (more details: https://angular.io/guide/animations).

In practice, I put wrapper element around the router outler:

<GridLayout rows="*" row="1" [@routerAnimations]="prepareRouteTransitions(outlet)">
        <router-outlet name="main-menu-content" #outlet="outlet"></router-outlet>
</GridLayout>

And added prepareRouteTransitions method to the component, that is reponsible for this view:

prepareRouteTransitions(outlet) {
        const animation = outlet.activatedRouteData["animation"] || {};
        return { value: animation["value"], params: { screenWidth: this.screenWidth } } || null;
}

Then, in app.routing.ts I added an extra animation param, so it can be used in the prepareRouteTransitions method (see above), so we can know from and to which views we are animating.
For example (see the value part):


const routes: Routes = [
... other routes ...
{
        path: "main-menu", component: MainMenuComponent, children: [
            { path: "statistics", component: StatisticsComponent, outlet: "main-menu-content", data: { animation: { value: "statistics" } } },
            { path: "games-menu", component: GamesMenuComponent, outlet: "main-menu-content", data: { animation: { value: "games-menu" } } },
        ... other routers in this outlet ....
}
... other routes ...
];

Then, in the same component I added angular animation definitions:

@Component({
    selector: ...,
    moduleId: module.id,
    templateUrl: ...,
    styleUrls:...,
    providers: [... ],
    animations: [
        trigger('routerAnimations', [
            transition('statistics <=> games-menu', [/* animation definition here */]),
            // more definitions here
        ])
    ]
})

For the last part, you just need to look into how Angular handles animations. The values set in the router will be the “states” in the angular animation system.