native-page-transitions plugin

[Sagi]

Hi,

As I understand this plug in allows navigating between html views using native animation.

 I would like to get more information regarding the "Drawer - iOS and Android only" section.

Does this plugin allows to create native drawer or just native animation of the HTML drawer ?

If this is a native drawer , how can I build it and manage it ?

 http://plugins.telerik.com/cordova/plugin/native-page-transitions

Thx

Sagi

[Tina Stancheva]

Hello Sagi,

The plugin allows you to use native transitions. The Drawer part basically refers to the Kendo UI drawer where the Kendo UI transitions are replaced with native transitions.

You can check that behavior in the Demo app available for the plugin - you'll see a Kendo UI section in it where you can compare the Kendo UI default transitions and the native ones applied through the plugin.

Regards,
Tina Stancheva
Telerik

 

 

[Sagi]

Great, thx.

One last thing, cant figure out where is the demo app that illustrates the transitions.

Is this the app builder example or do you have some demo app in google play?

Can you please direct me to the demo ?

Thx

Sagi

[Tina Stancheva]

Hello Sagi,

This is the repository where the demo is uploaded. Also, note that for most Telerik Verified Plugins, like this one, there is a Load in AppBuilder button which basically loads a sample app in your Telerik Platform account. The sample app usually demonstrates the main methods and properties available in the plugin's API.

Let me know if that helps.

Regards,
Tina Stancheva
Telerik

 

 

[Sagi]

Thx ! .

One thing I think I missing is how to use the page-transition plugin 

When I see the following code I do not understand which view becomes active when calling  nativepagetransitions.slide,

Slide to which view ?

appreciate if you can explain.

slide: function (direction) {
      var highspeed = $("#slide-highspeed-switch").data("kendoMobileSwitch");
      var overlap = $("#slide-overlap-switch").data("kendoMobileSwitch");

      if (!this.checkSimulator()) {        
        var options = {
          "direction" : direction,
          "duration"  : highspeed.check() ? 400 : 3000,
          "slowdownfactor" : overlap.check() ? 4 : 1,
          "iosdelay"     : 0,
          "androiddelay" : 0,
          "winphonedelay": 0,
          "href" : null,
          "fixedPixelsTop": 0,
          "fixedPixelsBottom": 60
        };
        window.plugins.nativepagetransitions.slide(
          options,
          function (msg) {console.log("SUCCESS: " + JSON.stringify(msg))},
          function (msg) {alert("ERROR: "   + JSON.stringify(msg))}
        );
      }

[Tina Stancheva]

Hello Sagi,

Please accept my apology for the delay in the response. The function you extracted from the demo actually navigates back to the same page. When you don't add a href parameter in the options definition, the NativePageTransitions plugin will still apply a transition but on the current page. This basically means that you'll see a navigation from the current page to the current page with an applied transition. If you need to pass a specific page to navigate to, you'll extend the options definition:

var options = {
     "direction" : direction,
     "duration"  : highspeed.check() ? 400 : 3000,
     "slowdownfactor" : overlap.check() ? 4 : 1,
     "iosdelay"     : 0,
     "androiddelay" : 0,
     "winphonedelay": 0,
     "href" : null,
     "fixedPixelsTop": 0,
     "fixedPixelsBottom": 60,
     "href": "#someViewId"
   };

Generally speaking, in order to use the plugin to navigate between pages you should invoke one of the following methods in code:

• window.plugins.nativepagetransitions.slide(options, success, failure) - use the slide transition to navigate between pages
• window.plugins.nativepagetransitions.flip(options, success, failure) - use the flip transition to navigate between pages
• window.plugins.nativepagetransitions.fade(options, success, failure) - use the fade transition to navigate between pages. Note that this transition only works on Android and iOS
• window.plugins.nativepagetransitions.drawer(options, success, failure) - use a "drawer-like" transition to navigate between pages. I have to apologize as I mislead you here, you can absolutely use this transition outside of a Kendo UI application to slightly show a second page on top of the first and then close it as you would a drawer menu. This is why it is important to use this method to navigate to a page that provides a side menu functionality. Note that this transition only works on Android and iOS and you can define the action in the options object.
• window.plugins.nativepagetransitions.curl(options, success, failure) -  - use the curl transition to navigate between pages only on an iOS device

You can find the options definitions in the Plugin description page. In all options objects you can add a href parameter to control the target url of the navigation. If you are trying to implement a specific scenario, please attach your project here and I will be happy to extend it to better work for your case.

Regards,
Tina Stancheva
Telerik

[Rahul]

how can i use native page transition in my app please guide me step bystep.

[Tina Stancheva]

Hello Rahul,

In order to use the Native Page Transitions plugin in your app, you need to install the plugin in your app. Please follow these steps to do so.

Once the plugin is installed its API is available and you can use it to navigate between pages in your app. The methods available in the plugin are outlined in its dedicated page in the Telerik Verified Plugins Marketplace as well as in my previous response in this thread.

If you'd like to see the Native Page Transitions plugin API in action, please click on Load in Telerik Platform when you load the plugin's dedicated page. This will open a sample app for you in Telerik Platform which you can run:

• In the device simulator
• In the AppBuilder companion app
• directly on a device

Let me know if you need more information.

Regards,
Tina Stancheva
Telerik