Ion-nav-view animations

ionic-v1
1

I just upgraded to the 1.0.0 beta and tried to use animations on a ion-nav-view. The class attribute example for animations isn’t working for me:

<ion-nav-view class="slide-left-right">

I ended up using the examples listed on codepen (http://cdpn.io/odqCz):

<ion-nav-view animation="slide-left-right"></ion-nav-view>

Is there any in depth documentation on the animations? I want parent views to animate, but not the child views.

2

To disable any animation, just add the class no-animation to the child view

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

The class isn’t working? Hmm, @andy are the animations being applied to the nav-views by classes or did we go back to the animation attribute?

3

Cool thanks. I’ll give no-animation a try.

4

This still remains an issue since setting animations by class was suggested in this github issue. If animations by adding classes are not working then the fix suggested in that github issue won’t work.

5

I’m having the same issue, trying to have different animations for different pages.

I’ve tried the nested approach suggested on this thread, and alas it doesn’t work using animation=“no-animation” or ng-class=“no-animation”.

Any suggestions where to go on this one or should I open a GitHub request?

I’ve forked a codepen, and you will see that the page “Scientific Facts” has a nested approach and should have no animations, but most of the time it does.

6

OK So I thought I have kinda figured it out by simplifying the codepen by @mhartington to remove the menu setup.

Alas, while that aptly demonstrates how to have different animation schemes, it also demonstrates that several of the documented animations don’t apply. The ones that do are the slide-in-left/right variety and no-animation. The ones that don’t are fade in, reverse and slide-in-up.

Any suggestions on how to get slide-in-up working for ion-nav-view?

7

For those who want animate with fading between different views, simply add this rule to your css

.fade-in-out.ng-enter, .fade-in-out .ng-enter {
  -webkit-animation: fadeIn 0.3s;
  -moz-animation: fadeIn 0.3s;
  animation: fadeIn 0.3s;
  position: absolute; }
.fade-in-out.ng-leave, .fade-in-out .ng-leave {
  -webkit-animation: fadeOut 0.3s;
  -moz-animation: fadeOut 0.3s;
  animation: fadeOut 0.3s;
  position: absolute; }

and in the ion-view:

<ion-nav-view animation="fade-in-out >
3 Likes
8

hey, your recommendation kinda worked for me but not in full. I’m having some issues with animation on Android 4.4.2 and iOS (emulator). Works fine in browsers and Android 4.4.4. Here’s what I have:

 <ion-nav-view animation="fade-in-out"></ion-nav-view>

and I also added the following CSS as I only wanted a slide in animation:

.fade-in-out.ng-enter, .fade-in-out .ng-enter {
	-webkit-animation: slideInUp 0.3s;
	-moz-animation: slideInUp 0.3s;
	animation: slideInUp 0.3s;
}

No animation at all is visible on iOS or Android 4.4.2. Any suggestions?

9

Hello together!

Is this some kind of obsolete? Because I’m not getting any animation. Not this way and not any other way…
And i tried many things found with google and in docs. I tried it through Ionic and through Angulas.js but failed in both.
I want the Tab pages to slide in from the bottom or the top when “opening” them and slide in the other direction when “closing” them (going back to the overview/“no tab”)

By the way: How to get this tab bar (ion-tabs w. ion-tab) at the bottom on android?

Thank you very much!

10

You can get the tabs on the bottom with the help of the $ionicConfigProvider,

var myApp = angular.module(‘reallyCoolApp’, [‘ionic’]);

myApp.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position(‘bottom’);
});

11

Thanks for your reply!

Unfortunately, this isn’t really an issue instead of the fact that I don’t get any animations on tab change.
But I do get animations on modal open/close and on navigating forth and backwards…

regards

12

I have exactly the same observation. The ‘animation’ attribute in “ion-nav-view” seems to have no effect.

So if I code:

<ion-nav-view animation="slide-in-up"></ion-nav-view>

it doesn’t seem to have any effect, regardless what value I put in the animation attribute.
I tried this with the “tabs” starter app, and with the “sidemenu” starter app.

Could this be a bug? Not a show-stopper, just curious …

13

It looks like the animation attribute was removed? What is the current way to specify the ion-nav-view animations?

The intro part of a new app i’m building is a flat (solid-color) style interface that should do similar to the android transition (current view slides left offscreen, next view slides in from right), where-as we want the rest of the app to maintain platform specific animations.

Any ideas?

1 Like
14

+1 for this. Would be very useful to know how to specify/turn-off nav animations for specific views

2 Likes
15

Same here +1. Previous examples did’t work for me.

16

So the animations for tabs were removed in beta 14. Currently there is no built in way to change the animations for tabs.

17

+1 Would be nice to have animations for specific views instead of either having it everywhere or nowhere.

1 Like
18

I know i’m late to the party but:
the navTransition directive does exactly what you need.

19

Not at all…

It works when you transition between states that are in the same ion-nav-view but not between different ones.

Still looking for a “from right to left” animation on specific ion-nav-view

20

Hi @panurge_ws ,

I am not able to get fade-in-out transition as per your recommendation. Adding animation attribute to ion-nav-view apparently does nothing. Appreciate any help.