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 :)