Native View Transition Animations

tutorials
41

How would you do the side menu (hamburger). When I use the drawer transition it kind of glitches out and breaks.

42

i think you should slide, fade and flip … the others are not that well working. on the page telerik plugin page they recommend to use this three types:
http://plugins.telerik.com/cordova/plugin/native-page-transitions

1 Like
43

and a little tutorial in german:
Performante Seiteßbergänge in Cordova und PhoneGap Apps

44

Did your ‘$ionicView.afterEnter’ method works? I tried and found that the problem wasn’t resolved with this method especially if you test it on low end handphone. The same page will animate in, only then it change to next page. You can better see the problem by setting “androiddelay = 0”. Or, you have get the issue solved?

45

The problem is almost resolved. I didn’t find a simple and always working solution, but I think that this one is one of the simpliest.
I don’t have any low-end device, but yes, you’ve to “play” with the androiddelay option.

46

Those animations are really awesome. Good job, Gajotres!
There are some bugs like missing swipe-to-back effect on iOS and missing effect while using HW back button on Android, but I think we can handle it in the near future.

48

One thing I didn’t get it, seems we are using ‘$ionicView.afterEnter’, the new page should be long ready generated when the event is called. But why are we still get the same old page being animated in if the delay duration is too short? Could it be a bug of ionic?

1 Like
50

A hack, but this gets me transitions when using the android back button:



.run(function($ionicPlatform, $rootScope, $ionicHistory)

{

$ionicPlatform.ready(function()

{

if ( window.cordova )

{

$rootScope.historyId = undefined;

$rootScope.cursor    = undefined;

$rootScope.stateId   = undefined;

        $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams)
        {
            var interval = setInterval(function()
            {
                var newHistoryId   = $ionicHistory.currentHistoryId();
                var newCursor      = $ionicHistory.viewHistory().histories[newHistoryId].cursor;
                var currentStateId = $ionicHistory.viewHistory().histories[newHistoryId].stack[newCursor].stateId;

                if ( (newHistoryId != $rootScope.historyId) || (newCursor != $rootScope.cursor) || (currentStateId != $rootScope.stateId) )
                {
                    if ( (newHistoryId == $rootScope.historyId) && (newCursor < $rootScope.cursor) )
                    {
                        window.plugins.nativepagetransitions.slide( { "direction": "right" },
                            function (msg) {},
                            function (msg) {alert("error: " + msg);}
                        );
                    }

                    $rootScope.historyId = newHistoryId;
                    $rootScope.stateId   = currentStateId;
                    $rootScope.cursor    = newCursor;
                    clearInterval(interval);
                    return;
                }
            }, 50);
        });
    }
1 Like
51

This plugin works great but it doesn’t seem to available in the phonegap build service as it’s not in the npm repositories.
Unfortunately we are using phonegap build to build our ionic app, anybody got any suggestions how to use this plugin together with the phonegap build service?

52

I did something similar to this. But I used $ionicView.enter. It works fine. Animation are super smooth everywhere. But Handling it is a headache. Especially when switching tabs.

53

try

<gap:plugin name="com.telerik.plugins.nativepagetransitions" source="plugins.cordova.io" version="0.4.0" />

until cordova.io is available

54

Thank you, I couldn’t find a reference anymore in the repositories but that’s probably because they changed fully to npm just recently.

55

Does anyone have a final ‘all working’ setup for this yet or is very much still in progress?

56

You can take a look at this plugin : https://github.com/shprink/ionic-native-transitions

It have been updated recently for those who want to execute transition when page is loaded instead of hardcoded delay!

I’ve tested it and the autor did an excellent job!

1 Like
57

@Stylemayster.First of all thank you for this tutorial.
I have add this plugin via bower.(‘bower install shprink/ionic-native-transitions’) and installed telerik plugin via

‘ionic plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.5.0’

Then I add ‘ionic-native-transition.js’ to index.html and inject ‘ionic-native-transitions’ to app.js. Then add the following codes to app.js

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider,$ionicNativeTransitionsProvider) { $ionicNativeTransitionsProvider.setDefaultOptions({ duration: 400, // in milliseconds (ms), default 400, slowdownfactor: 4, // overlap views (higher number is more) or no overlap (1), default 4 iosdelay: -1, // ms to wait for the iOS webview to update before animation kicks in, default -1 androiddelay: -1, // same as above but for Android, default -1 winphonedelay: -1, // same as above but for Windows Phone, default -1, fixedPixelsTop: 0, // the number of pixels of your fixed header, default 0 (iOS and Android) fixedPixelsBottom: 0 // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android) //triggerTransitionEvent: '$ionicView.afterEnter' // internal ionic-native-transitions option }); $ionicNativeTransitionsProvider.setDefaultTransition({ type: 'slide', direction: 'left' }); $stateProvider .state('main', { url: '/main', abstract: true, templateUrl: 'templates/main.html', controller: 'AppCtrl' }) .state('main.login', { url: '/login', views: { 'main-page': { templateUrl: 'templates/main/login.html', controller: 'logincntrl' } } }) })

and run in the device.The application launch successfully.But got error alert "unfortunately app has stopped’ at the time of page transition.

Thank U

58

@Stylemayster
nice idea to listen on viewEvents, we have done this programmatically in a test app.

i linked your module at the end of my blog post:
http://www.flyacts.com/blog/performante-seitenuebergaenge-in-cordova-phonegap-apps/

59

Hum that unfortunate. Have you tried to update to version 0.5.1?

60

@Stylemayster
Thanxs for ur reply.I have updated to version 0.5.1. But no changes.Any error in my code above?

61

I don’t saee errors. It’s pretty much the same config as me except you can uncomment this line → triggerTransitionEvent: ‘$ionicView.afterEnter’.

Are you sure it come from the plugin telerik? In my case, I don’t have crosswalk, maybe it interfere if you have installed it?

62

@Stylemayster

when uncomment 'triggerTransitionEvent: ‘$ionicView.afterEnter’ it will show console error “triggerTransitionEvent” not defined. And I have installed crosswalk…

Thank U