Nativescript: Page Transition Animation (TypeScript + Angular2)

[odubuc]

I opened a question a few months ago and I didn't get an answer so I'm trying GitHub

I'm using Typescript + Angular2 and I would like to use the page transition animation as explained in the documentation, unfortunately, I cannot get it to work.

I tried this:

this.routerExtensions.navigate(
    [
        'myPage'
    ], 
    {
        animated: true, 
        transition: 
        {
            name: 'flip', 
            duration: 2000, 
            curve: 'linear'
        }
    } 
);

or this :
<Button text="Goto myPage" [nsRouterLink]="['/myPage']" pageTransition="flip"></Button>

In both scenario, I get a normal page navigation without any transitions/animations. What am I missing?

Which platform(s) does your issue occur on?

Only tested on Android so far

Please provide the following version numbers that your issue occurs with:

• CLI: 2.5.0
• Cross-platform modules: 2.5.1
• Runtime(s): 2.5.0
• Plugin(s): "nativescript-angular": "1.4.1"

[tsonevn]

Hi @odubuc,
I tested your case on my side on both iOS and Android and everything seems to work as expected.
Could you verify, whether you will have the same behavior while following the below-attached steps?

1. tns run test --ng
2. cd test
3. replace the items.component.html and items.component.ts files with the attached code snippets

items.component.html

<ActionBar title="My App" class="action-bar">
</ActionBar>
<StackLayout class="page">
    <ListView [items]="items" class="list-group" (itemTap)="onItemTap($event)">
        <template let-item="item">
            <Label [text]="item.name"
                class="list-group-item"></Label>
        </template>
    </ListView>
</StackLayout>

items.component.ts

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular"
import { ItemEventData } from "ui/list-view";

import { Item } from "./item";
import { ItemService } from "./item.service";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {
    items: Item[];

    constructor(private itemService: ItemService, private routerExtensions:RouterExtensions) { }

    ngOnInit(): void {
        this.items = this.itemService.getItems();
    }

    onItemTap(args:ItemEventData){
        let itemID = this.items[args.index].id;
        this.routerExtensions.navigate(['/item', itemID],
            {
                animated:true,
                transition: {
                    name: "flip",
                    duration: 2000,
                    curve: "linear"
                    }
            }
        )
    }
}

1. tns run <platform_name>

If you still have an issue with the transitions, please provide some sample project, which could be debugged locally.

Regards,
@tsonevn

[odubuc]

Hi @tsonevn ,

I tried your example and it works perfectly. I'll investigate what's the difference between your test project and mine. I'll close the issue and post my findings later. (Unfortunately I cannot share the source code)

Thank you for your time!

[hiddencaliber]

I faced similar problems, the reason is that I was using only Angular routers,
<router-outlet></router-outlet>
instead of -
<page-router-outlet></page-router-outlet>

@tsonevn,
please let me know if this is bug or a limitation of the framework.

Thanks

[odubuc]

This was the source of my issue as well (totally forgot to come back here post the reason)

changing from router-outlet to page-router-outlet solved my animation problems

[tsonevn]

Hi @hiddencaliber,
Using transition animations provided by NativeScript RouterExtensions is supported only for page-router-outlet by design.
In this case, you should use page-router-outlet instead of router-outlet as @odubuc suggested.

[gambheera]

Hi @tsonevn
I'm also having same issue. I'm using page-router-outlet. But problem is still there and coundn't find a gap with the solution that provided by you.
Here is my project: https://www.dropbox.com/s/novbpi14lth6zij/route-test.zip?dl=0
Could you please help me to get this solved

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.