native-page-transitions plugin

8 posts, 0 answers
  1. Sagi
    Sagi avatar
    60 posts
    Member since:
    Sep 2008

    Posted 19 Jan Link to this post

    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

  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 21 Jan Link to this post

    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.

     
  3. Sagi
    Sagi avatar
    60 posts
    Member since:
    Sep 2008

    Posted 21 Jan in reply to Tina Stancheva Link to this post

    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

  4. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 22 Jan Link to this post

    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.

     
  5. Sagi
    Sagi avatar
    60 posts
    Member since:
    Sep 2008

    Posted 24 Jan in reply to Tina Stancheva Link to this post

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

  6. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 28 Jan Link to this post

    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
  7. Rahul
    Rahul avatar
    2 posts
    Member since:
    Feb 2016

    Posted 26 Feb Link to this post

    how can i use native page transition in my app please guide me step bystep.
  8. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 01 Mar Link to this post

    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.

     
Back to Top