Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Native page transition for cordova application

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.90k
    Comment on it

    Hello readers,
    Cordova native transition plugin provides native transition between your application views. This plugin provides a complete  supervision to you over the duration, direction and type of transition required in your app.

    This plugin provides slide, curl, flip, fade transition between pages as per requirement. In short it is a wonderful plugin with native transition functionality.

    Installation :

    First of all install plugin through CLI:

    $ cordova plugin add com.telerik.plugins.nativepagetransitions

    Now we will talk about functionality. All we want the slide animations in our application.


    For example:

    • Slide Animation

    index.html

    <ion-view view-title="Action Sheet">
        <ion-content class="padding">
            <div class="row">
                <div class="col col-50">
                    <button class="button button-block  button-balanced" 
                    ng-click="flipMe()">My chat page</button>                
                </div>
            </div>
        </ion-content>
    </ion-view>

    controller.js

    $scope.flipMe = function()
    {
         window.plugins.nativepagetransitions.slide({
             "direction" : "up",
             "href" : "#/tab/chats"
         });
    }

    In the above code we are using slide animation for transition between view. We can slide in up, down, right, left direction. There  some options we can use in slide animation. Default direction is left.

    • Flip Animation

    Flip animation can be in left, right, up.down direction and its default direction is right. 

    For example:

    window.plugins.nativepagetransitions.flip({
        "direction" : "up",
        "href" : "#/tab/chats"
    });
    • Fade Animation

    Fade animation only works on Android and iOS platfrom and it disappears the current page and makes the next page appear. Duration of fade animation in milliseconds and by default it is 400 ms.

    For example:

    window.plugins.nativepagetransitions.fade({
        "duration" : "600",
        "href" : "#/tab/chats"
    });
    • Drawer Animation

    Drawer animation is works on side menus and it supports Android and iOS platform only. By default its direction is on left side but it can be on right side also defined in origin. We can perform action open or close.

    window.plugins.nativepagetransitions.drawer({
       "origin": "left",
       "action": "open" 
    });

    Enjoy and implement the native transition functionality. For more details please visit : Click here

    Hope this will help you :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: