Control the animation in $state.go

ionic-v1
1

Hi,

I have a view (state) with a page parameter and users can navigate to the previous or next page.
I would like to disable the sliding animation when changing page.

Is it possible to control the animation (in my case, disable the animation) programmatically, in $state.go options?

I tried:

$state.go( '.', { page: nextPage }, { animation: 'no-animation' })

But no luck, the page slides…

1 Like
2

I believe the use of $state in Ionic comes from angular-ui’s router library.

Based on angular-ui’s documentation for $state, it doesn’t look like there’s any use of an animation option, and if Ionic isn’t extending the angular-ui-router library then $state.go's options are most likely the same.

However, my guess is that you’re most likely trying to transition to another <ion-nav-view> , in which case your solution might be this:

<ion-nav-view animation="no-animation"></ion-nav-view>

Credits to @mhartington for the solution (there’s more discussion on how to add more animations to ion-nav-view, it’s a good read).

3

There’s actually no ion-nav-view on that particular view…

4

Try this:
$ionicViewSwitcher.nextDirection(‘forward’); // ‘forward’, ‘back’, etc.
$state.go(‘myState’);

5 Likes
5

To disable the animation, you can use:

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

Then call $state.go(...) (link to related SO question).

4 Likes
6

If it can help someone, in source code you can see all direction of navigation and the history actions while navigating views ! (line 633 : ionic-angular.js)

  // history actions while navigating views
  var ACTION_INITIAL_VIEW = 'initialView';
  var ACTION_NEW_VIEW = 'newView';
  var ACTION_MOVE_BACK = 'moveBack';
  var ACTION_MOVE_FORWARD = 'moveForward';

  // direction of navigation
  var DIRECTION_BACK = 'back';
  var DIRECTION_FORWARD = 'forward';
  var DIRECTION_ENTER = 'enter';
  var DIRECTION_EXIT = 'exit';
  var DIRECTION_SWAP = 'swap';
  var DIRECTION_NONE = 'none';