Native View Transition Animations

Requirements

To make this work we need Telerik Native Page Transitions plugin. It's made for KendoUI but at the same time it's platform agnostic making it usable with Ionic.

Plugin can be found here: http://plugins.telerik.com/cordova/plugin/native-page-transitions#VersionHistory420

Install it like this:

cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions

Tutorial

You can read the previously mentioned documentation.

Or tutorial post here545, it includes a working example + GitHub demo link.

I would be grateful if someone could test this on iOS.

I even wrote a light Ionic directive:

nameApp.directive('goNative', ['$ionicGesture', '$ionicPlatform', function($ionicGesture, $ionicPlatform) {
  return {
 restrict: 'A',

 link: function(scope, element, attrs) {

   $ionicGesture.on('tap', function(e) {

  var direction = attrs.direction;
  var transitiontype = attrs.transitiontype;

  $ionicPlatform.ready(function() {

    switch (transitiontype) {
   case "slide":
     window.plugins.nativepagetransitions.slide({
      "direction": direction
    },
    function(msg) {
      console.log("success: " + msg)
    },
    function(msg) {
      alert("error: " + msg)
    }
     );
     break;
   case "flip":
     window.plugins.nativepagetransitions.flip({
      "direction": direction
    },
    function(msg) {
      console.log("success: " + msg)
    },
    function(msg) {
      alert("error: " + msg)
    }
     );
     break;
     
   case "fade":
     window.plugins.nativepagetransitions.fade({
      
    },
    function(msg) {
      console.log("success: " + msg)
    },
    function(msg) {
      alert("error: " + msg)
    }
     );
     break;

   case "drawer":
     window.plugins.nativepagetransitions.drawer({
      "origin"         : direction,
      "action"         : "open"
    },
    function(msg) {
      console.log("success: " + msg)
    },
    function(msg) {
      alert("error: " + msg)
    }
     );
     break;
     
   case "curl":
     window.plugins.nativepagetransitions.curl({
      "direction": direction
    },
    function(msg) {
      console.log("success: " + msg)
    },
    function(msg) {
      alert("error: " + msg)
    }
     );
     break;     
     
   default:
     window.plugins.nativepagetransitions.slide({
      "direction": direction
    },
    function(msg) {
      console.log("success: " + msg)
    },
    function(msg) {
      alert("error: " + msg)
    }
     );
    }


  });
   }, element);
 }
  };
}]);

CR.https://forum.ionicframework.com/t/native-view-transition-animations/31422