$bezier-function: cubic-bezier(.1, .6, .1, 1);
 
/*
.slide-in-up.enter {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);

  -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
  transition: transform .25s ease-in-out, opacity 1ms .25s;
}
*/

.slide-in-up {
  &.enter {
    -webkit-transition: -webkit-transform .4s, opacity .4s;
            transition:         transform .4s, opacity .4s;

    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);

    -webkit-transition-timing-function: $bezier-function;

  }

  &.enter-active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  &.leave {
    -webkit-transition: -webkit-transform .25s, opacity .25s;
            transition:         transform .25s, opacity .25s;
  }

  &.leave-active {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}