Native Page Transitions for iOS and Android with Ionic Framework

ionic-v1
1

Hi guys, I found this plugin and I’d like to know if anyone is using it with Ionic, this plugin also has a “Ionic Adapter”, I’m wondering if I’ll really get better transitions using it in my application.

http://plugins.telerik.com/plugin/native-page-transitions

Thanks.

2

Anyone tried this yet with ionic?

3

I have, it works well, but I found the transitions to be a bit glitchy. I have this feeling it’s a result of my incorrectly using states and views which is causing the glitchyness. Either way, the transitions are very smooth.

To get this working, add the plugin to your project.
cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions
or any other method that works for you.

Download adapters/NativePageTransitionsIonicAdapter.js from

Add this after cordova.js in your index.html

Run on android or ios and it should work.

4 Likes
4

Where do you add the transitions to get a full page? It seems like only the ion-view is “transitable”, but it’s full of errors when trying to add some logic into it (not animating, hiding page and so on).

This is what I have tried, it partially works:

<ion-view ng-class={'inside-animation': animate, 'outside-animation': !animate}>
5

From what I can see this is built onto of Telerik so I don’t think it will be very easy to integrate it into Ionic since they’re not the same UI framework. At the bottom of that plugin page it says that the KendoUI is in beta, so it looks like they would have to actually write that to override the ionic animations.

Interesting find though

6

Seems to work, but I still can’t find a way to transition between tabs?

7

My workarround for now is to add the css

.pane { -webkit-transition-duration: 300ms!important; transition-duration: 300ms!important; }

It applies for tabs and gives a smooth fade-in fade-out transition.

8

That helped a bit :slight_smile: thx!

Still looking for a solution to apply a custom class based on direction etc. Can’t believe a basic thing like this is missing.

9

I think you will be able to integrate it into ngCordova.

I discovered it yesterday while read Telerik blog posts. From what I can see it’s platform agnostic.

I managed to integrate it into a demo app, and I must say it works just fine. It can be used programmatically and as a tag property.

I even wrote a crude directive that can be used with Ionic: Gajotres - Best Technology Product Reviews, News, Tips, and Comparison

3 Likes
10

Your article looks amazing @Gajotres I’ll give it a try.

Thank you so much!

1 Like
11

I’ve a question gajotres, when I try this transistion the screen goin black and do not the transition.

12

You guys can use https://github.com/shprink/ionic-native-transitions it is made especially for ionic and works out of the box.

13

@Shprink
Interesting! May I know how to use your plugin in phonegap build.

Thanks

14

You can install Telerik’s plugin like that apparently:

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

The ionic plugin is available from npm or bower.

15

Thanks. But I am asking your ionic-native-transitions plugin. Trying like this.
<gap:plugin name="ionic-native-transitions" source="npm" version="1.0.0-rc3" />

But not able to build. Getting build error.

16

ionic-native-transitions is not a Cordova plugin. You can install it using Gulp or npm. Please refer to the documentation.

17

Thanks. Working cool!

18

Great job! Really love your work. I’m having slight trouble with tabs. I mean details pages within tabs need animation, whereas switching among tabs doesn’t. Got around this by only enabling animations for specific state changes. However, switching from a child page within a tab to another tab causes problems (e.g., switching back, the back button etc.) Is there a best known method to deal specifically with tabs? Any pointers will be of great help. Thanks!

19

@Shprink
I followed the documentation you provided for the ionic-native-transitions but after injecting it to my app.js file I get this error message “nativepagetransitions is disabled or nativepagetransitions plugin is not present”. I am still new to Ionic and I am using v1.2. Your help is appreciated.

Thank you.

20

Hi,

you are missing the lib, please refer to this thread: https://github.com/shprink/ionic-native-transitions/issues/29#issuecomment-175099604

If you are having trouble you can contact me here https://gitter.im/shprink/ionic-native-transitions

cheers