Setting the transition direction animation


I had the same problem and i’ve come with the following solution:

In templates I made the following addition:

<ion-tabs class="tabs-icon-top slide-left-right" ng-class="{reverse:isReverse}">

In controller I registered the following listener to $stateChangeStart:

.controller('TabCtrl', function($scope, $state, $rootScope) {
   $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        // determine the direction of the transition
	$rootScope.isReverse = <;	

It works ok so far.


is there any progress about setting the direction of page transitions manually ?



I would also like to know the answer to this.


In the nightly builds (which will become beta 14) there is a directive called navDirection which let’s you declare which direction the page should go. Here is the quote explaining other ways from Please help test: Angular 1.3, improved transitions, cached views, etc:


I want to set transition to none for the first view. This first vieuw now is sliding in from state.go(’/kaart’).
how do I set this transition to ‘none’


You could use this before the call to $state.go:

  disableAnimate: true


I found it:

     disableAnimate: true,
     disableBack: true


We crossed this solution!!!

Thanks anyway.


So, I discovered the solution to this. There is a secret service called $ionicViewSwitcher, that doesn’t appear in any of the public docs, but it is how the navDirection attribute works. If you call ionicViewSwitcher.nextDirection([direction]) right before $state.go([state]), the view transition will follow that direction. Directions are as specified in the navDirection (if you click the view source button, you can see exactly how it works).


I have a followup question to what @tenfef asked. I’m not sure if I should create a new thread / post for this, but is there currently a way to adress the history issue of skipping B in A -> B -> C ?

On the homescreen of the app I’m working on (A in this case), someone can directly go to C (tabbed subview) but when he gets there, the back button does not work (there is no history). If the user first goes to B (main app tab navigation) and then goes to C, there is history and the back button works (when in C, the user first goes back to B, then back to A).


Thanks a lot, @Samesis. I tried to use navDirection for my purpose but it simply didn’t work. $ionicViewSwitcher.nextDirection('back'); did the trick, though.

My setup was to have a button like this:

<button nav-direction="back" data-ng-click="ctrl.goBack();"></button>

and some code in the controller like this:

	$ionicHistory.nextViewOptions({disableBack: true});

Still, ionic didn't respect the value set in nav-direction and I couldn't figure out why.


Well, now I tried to use it in a very simple way, with an <a href> and it still didn’t work. Is this thing functional at all?


I found out that this happens due to ng-repeat and filed a bug. You can find it here.


Thanks to brandyshea’s answer, that was very useful.

After implementing that solution I’ve also discovered that when using anchors, I can include a ‘href’ attribute (with relative address) and a ‘nav-transition’ attribute (with ‘back’ or ‘forward’) value to have the transition, whereas I can use an ‘ng-click’ attribute (with relative function, such as $state.go…) to prevent the transition. Hope this helps others.


Thanks @mobileAppDeveloper for the suggestion to use $ionicViewSwitcher.nextDirection() directly instead of relying on nav-direction tag.

I found that nav-direction sometimes work but sometimes doesn’t. I suspect it has something to do with the priority of the directive not high enough. Hope the ionic team can take a look at that.


Now this is what I like: programmer control over things like these! All this “magic” and “automatic” stuff sounds nice but there are too many “non standard” situations/scenarios where it’s more a hindrance than it is helpful.

Don’t make the “system” think for me and try to be too intelligent, just give me control!


I wanted to use Curl animation in page transition for android. How can it be done? Native Page transition plugin not supported “Curl” for android


brother would you find solution for page curl in android using ionic ?