Disabling animation in beta 14?

I’ve tried adding animation="no-animation" to my <body>, <ion-nav-bar>, and <ion-nav-view> tags, but I still see side-animation when I switch between views linked in my side-bar.

I’ve gone ahead and used $ionicConfigProvider for now to just disable view transitions altogether, but it seems weird that the animation tags don’t work if they used to. Something about the beta14/angular 1.3 transition?

Hi @RangerRick, you have to use nav-transition since beta.14.

Like you did, using

$ionicConfigProvider.views.transition('none')

you can set the global app transition method.


> From [v1.0.0-beta.14 “magnesium-mongoose” released!](http://forum.ionicframework.com/t/v1-0-0-beta-14-magnesium-mongoose-released/14171) thread:

Breaking Changes:

  • Animation CSS: The CSS for view transitions have changed. This is a breaking change only if Ionic apps had customized Ionic’s animation CSS. Additionally, all keyframe animations were removed since they weren’t being used. (20Kb saved!)

With the introduction of these new “platform specific animations” you’ll be able to create complex animations via CSS (ionic.css:6943) and also via JavaScript (ionic.bundle.js:43218).

The old CSS animations have been removed except for ‘slide-in-up’ (for modal).

Ah, ok, I totally missed that going through the update notes. Thanks. :slight_smile:

The documentation for nav-transition only shows an anchor tag. How to go about disabling transitions for one specific ion-nav-view? Tried adding nav-transition=“none” to basically everything but doesn’t seem to do anything.

It’s a bit problematic that the entire animation/transition system has changed. We built a web app which uses a number of customisations or had to define transitions on a per-view level. Now this seems not to work at all anymore. Some of us would maybe like to do a bit more than “just” the platform specific stuff. :confused:

I’ve also been looking to change transitions on other navigation elements such as “ion-tabs”… however I can’t find any documentation other than “nav-transition” for anchor tags.

Any tips or help please.

Looking at the navTransition directive, maybe you can use ionicViewSwitcher?

$ionicViewSwitcher.nextTransition('none');
1 Like

if you want to have a fixed direction your can put nav-direction=“back” or nav-direction=“forward” on your link.
Maybe that is working on other elements or you can “fake-in” links.

In other cases use the ionicViewSwitcher.

Thank you! I’ve been looking for this solution for a while now!

1 Like