If anyone’s interested, I found a way to use native view transitions with Ionic Framework.
This solution will only work on smartphones, so desktop browsers and Ionic View are out of the question.
##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#VersionHistory
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 here, 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);
}
};
}]);
I will refine it over time. This was made just for a testing purpose.
##Examples
I’ve intentionally used a slow Android device:
###Before:
###After:
Note: The first video is not a representative performance of Ionic Framework, I’ve used a low-end Android smartphone (Sony M2) to emphasize the difference.
