This is a migrated thread and some comments may be shown as answers.

native-page-transitions plugin

7 Answers 110 Views
Apache Cordova
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Sagi
Top achievements
Rank 1
Sagi asked on 19 Jan 2016, 07:06 AM

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

7 Answers, 1 is accepted

Sort by
0
Tina Stancheva
Telerik team
answered on 21 Jan 2016, 04:06 PM
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
 

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

 
0
Sagi
Top achievements
Rank 1
answered on 21 Jan 2016, 06:56 PM

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

0
Tina Stancheva
Telerik team
answered on 22 Jan 2016, 08:24 AM
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
 

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

 
0
Sagi
Top achievements
Rank 1
answered on 24 Jan 2016, 08:30 PM

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))}
        );
      }

0
Tina Stancheva
Telerik team
answered on 28 Jan 2016, 08:33 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rahul
Top achievements
Rank 1
answered on 26 Feb 2016, 12:33 PM
how can i use native page transition in my app please guide me step bystep.
0
Tina Stancheva
Telerik team
answered on 01 Mar 2016, 04:08 PM
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: Let me know if you need more information.

Regards,
Tina Stancheva
Telerik
 

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

 
Tags
Apache Cordova
Asked by
Sagi
Top achievements
Rank 1
Answers by
Tina Stancheva
Telerik team
Sagi
Top achievements
Rank 1
Rahul
Top achievements
Rank 1
Share this question
or