Native View Transition Animations

tutorials
63

Hum…really don’t know…
All I can say is that I have last version of ionic 1.1.0, last version of telerik plugin, last version of ionic-native-transitions, don’t have crosswalk, and there is my code:
$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: 200, // 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
});

I’m really sorry that it don’t work for you :frowning:

1 Like
64

@Stylemayster

Thanxs for ur reply…I think the problem is with crosswalk.No problem.

:disappointed_relieved:

65

@Stylemayster

Ok…I remove crosswalk plugin.Now it works fine.The problem was with crosswalk plugin.Thank You very much… :smile:

1 Like
66

No problem. Crosswalk begin to be a running gag in my office. I think it create more problen than it resolve.

1 Like
67

now available in npm for PGB!
<gap:plugin name="com.telerik.plugins.nativepagetransitions" source="npm" />

68

Looks amazing- but I can’t get it working. Can anyone tell me where I went wrong?

  1. Added added the “/ionic-native-transitions/dist/ionic-native-transitions.js” script to my index.html file (I had to load it after ionic.bundle.js). i did this because I didn’t understand how to get it working with ES5 (never done node.js/browsify)

  2. Added it as a module, and added transitions to routing.

  3. No errors encountered console says “nativepagetransitions is disabled or nativepagetransitions plugin is not present”. When I build (ios/xcode) the app only loads the menu bar & nothing else.

PS Is this plugin needed or does ionic now have this built-in?

69

In order to make it work along with Crosswalk, simply add this line into config.xml (inside ‘widget’ tag):

<preference name="CrosswalkAnimatable" value="true" />

70

In the end, I just added it in the config and call triggerAnimation on $ionicView.loaded. This automatically takes care of everything as Ionic already handles everything. We just need to over-ride css animations with this.