Custom page transitions?


#1

Is it possible to create custom page transitions and if so how? :slight_smile:

We would like to make a page transition that slide op and over the old page, rather than the built-in slideTop that pushes the previous page upwards.

Is that possible?


#2

@triniwiz do you have a plugin that handles this? The Pager? (http://plugins.nativescript.org/plugin/nativescript-pager) Or would you recommend building a new plugin to handle this?


#3

@jen.looper for custom transitions he can start here => https://docs.nativescript.org/core-concepts/navigation#custom-transitions


#4

Thank you @triniwiz I had missed that in the documentation. :blush:


#5

How does one use custom transitions when using Angular? I can’t find anything on it.


#6

@SP1966
Yes, you can.

You need to use the RouterExtension.

      this.routerext.navigate(['/path/to/new/page'], {
        transition: {
          instance: new CustomTransition()
        },
      });                                                                                                                                                                                                                                  

I don’t think you can do it with the nsRouterLink-directive.


#7

Thank you @m_abs! I’m sure it was in the docs somewhere, just not anyplace I was smart enough to look! :slight_smile:


#8

It’s not well-documented on the website.

If you read:
https://docs.nativescript.org/angular/core-concepts/angular-navigation.html#specifying-page-transitions

NavigationOptions.transition is an NavigationTransition, which is documented here:
http://docs.nativescript.org/api-reference/interfaces/ui_frame.navigationtransition.html