Creating custom transition animations


#1

Hello,

The last time I checked, “slide-in-up” is still being worked on in Ionic, so I wanted to create my own in the meantime. Can anyone point me in the right direction. The kind of transition animation is loosely illustrated in this Codepen.

I think I’m on the right track with the following CSS:

  .slide-up {
  }

  .slide-up.ng-enter, .slide-up.ng-leave {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    display: block;
    position: absolute;
  }

  .slide-up.ng-enter {
    top: 100%;
  }

  .slide-up.ng-enter.ng-enter-active {
     top: 0;
  }

  .slide-up.ng-leave.ng-leave-active {
     top: -100%;
  }

.box {
  border: 1px solid black;
  height: 100px;
  padding: 10px;
  background-color: #EEEEEE;  
  width: 100%;  
  left: 0;  
}

But when I try example, the box I am trying to slide up disappears.

My use case is to have my user fill out some information before moving forward but not giving the impression they have completely left the current flow.

Thanks!