How to create different animation for different page

  1. i want to display different animation with different pages. like home page has slide-in-up about page has slide-left-right. something like that.

  2. another issue is that if i am using class="fade-in" it works nice but if i put class="slide-in-up" its not working. code is here.
    <ion-nav-view name="menuContent" class="fade-in"></ion-nav-view> //working

above code working if i change it like this

<ion-nav-view name="menuContent" class="slide-in-up"></ion-nav-view> //not working

how to solve these two problems.?

Short answer is you can’t specify different animations for different views, not right now at least.

But we are working on it.
https://github.com/driftyco/ionic/issues/1360

Try changing class to animation

Thank you @mhartington. Sry to say also animation is not working.

Hmm, it could just the animation class isn’t meant for view transitions,

Slide-left-right and fade-in working fine but slide-in-up animation is not working.
I have cross checked css file and its fine.

Alright, can you open an issue for this?

Reference this codepen, which shows the issue.

done @mhartington. i have opened issue for that.

Whats the link to the issue?

I think you found it.

Just to let you know, issues are submitted on github, not the forum :smile:
I’ll post it there

Ok i dont know about this. I just copied your issue and i have create new issue.

Hey, has there been any movement on fixing this issue? I noticed it was opened more than a month ago and I just got the same problem on the latest nightly build - driftyco/ionic-bower#master

Also I had a workaround doing the slide-in-up animation on .fade-in-out.ng-enter, .fade-in-out .ng-enter however that caused weird issue with ‘extra’ height appearing on the view: http://stackoverflow.com/questions/25325176/css-animation-generates-extra-height-on-mobile

Same issue, I would like to override the global ion-nav-view animations for specific pages, is this possible yet?