How to create different animation for different page


#1
  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.?


Animation control on $ionicGesture.on swipe up
#2

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


#3

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


#4

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


#5

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.


#6

Alright, can you open an issue for this?

Reference this codepen, which shows the issue.


#7

done @mhartington. i have opened issue for that.


#8

Whats the link to the issue?


#9

I think you found it.


#10

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


Help on navigation workflow
#11

#12

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


#13

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


#14

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