Slide-in-up animation in nav-direction directive?

ionic-v1
1

Hi Folks,
I am looking to add slide-in-up kind of animation when a view ( not Modal ) is opened on a butoon click.
Cant find it in documentation, http://ionicframework.com/docs/api/directive/navDirection , is there any way I can acheive this?
I see few posts about this ask but not sure if this is available in ionic.

1 Like
2

Is it possible or not right now in ionic?

3

First, remember that you’ve got the full power of ng-animate at your disposal. But - and this is a big but - there seem to be some things you’ve got to adjust from Ionic’s default CSS behavior, in order to make some things work.

To start with, I had to use a basic ui-view instead of ionic-nav-view. Because otherwise, you’re fighting the default Ionic animations.

Then, create a class for your ui-view, and attach the requisite ng-animate sub-classes to it (I’m using SASS):

.my-subview {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
}
.my-subview.ng-enter {
            -webkit-animation: fadeInUp .8s;
            animation: fadeInUp .8s;
        }
.my-subview.ng-leave {
            -webkit-animation: fadeOutDown .8s;
            animation: fadeOutDown .8s;
        }

In my case, I was able to get the fade part of the animation to work immediately, but the positioning control that’s required to move it up and down was blocked, either by my own CSS structure, or by Ionic’s. To fix that, I had to absolutely position the view. After that, it worked just as I wanted.