I am trying to use the “slide-in-up” transition animation when I show a specific page. I am using the AngularJS router functionality to separate each of my app’s pages into separate html files. My index.html then loads the content of the page files using the router functionality. It all seems to work except I can’t specify the transition animation type. Would someone be able to provide a simple example of using animations? FYI… I am trying to apply the animation to a div tag but I can apply it to a different tag if necessary.
Can you post a codepen or plnkr of what you have?
Here you go. I did not include any attempts to add animations. I would like the “settings” page to slide up from the bottom when you click the gear icon on the header bar.
For something like that, use a modal to get that effect
I understand that I could use a modal for this… however, I have some plans to use animated page transitions in other areas as well. I was hoping to resolve this issue prior to moving forward with the rest of the design.
Also, I looked into this further and downloaded the ionic-angular-cordova-seed project ( https://github.com/driftyco/ionic-angular-cordova-seed ) to test using the state management functionality in Ionic vs. the AngularJS routing functionality. This seed project was already setup to use animations as it uses an ion-nav-view container for each of the pages. I tried applying each of the animation styles to the container and only a few of them worked. Are all of the animation styles supported by the ion-nav-view directive?
Right now, the modal would be your best option. Animations are kind of a global setting right now, where you can’t specify animation based on what you tap.
So short answer, you can’t go it right now.
Ok. Thanks for letting me know. I am looking forward to this feature being added. For now I can move forward without the animations.