.lui-transition-slide-in {
  position: relative;
  overflow: hidden;
  height: 100%;

  .lui-transition-slide-in-child {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    @include transition(all 0.45s ease-out)
  }

  .lui-transition-slide-in-enter {
    opacity: 0;
  }

  .lui-transition-slide-in-enter-active {
    opacity: 1;
  }

  .lui-transition-slide-in-leave {
    opacity: 1;
  }

  .lui-transition-slide-in-leave-active {
    opacity: 0;
  }

  &.lui-is-left {
    .lui-transition-slide-in-enter {
      @include transform(translate3d(100%,0,0));
    }
    .lui-transition-slide-in-enter-active {
      @include transform(translate3d(0,0,0));
    }
    .lui-transition-slide-in-leave {
      @include transform(translate3d(0,0,0));
    }
    .lui-transition-slide-in-leave-active {
      @include transform(translate3d(-100%,0,0));
    }

  }

  &.lui-is-right {
    .lui-transition-slide-in-enter {
      @include transform(translate3d(-100%,0,0));
    }
    .lui-transition-slide-in-enter-active {
      @include transform(translate3d(0,0,0));
    }
    .lui-transition-slide-in-leave {
      @include transform(translate3d(0,0,0));
    }
    .lui-transition-slide-in-leave-active {
      @include transform(translate3d(100%,0,0));
    }
  }

  &.lui-is-up {
    .lui-transition-slide-in-enter {
      @include transform(translate3d(0,100%,0));
    }
    .lui-transition-slide-in-enter-active {
      @include transform(translate3d(0,0,0));
    }
    .lui-transition-slide-in-leave {
      @include transform(translate3d(0,0,0));
    }
    .lui-transition-slide-in-leave-active {
      @include transform(translate3d(0,-100%,0));
    }
  }

  &.lui-is-down {
    .lui-transition-slide-in-enter {
      @include transform(translate3d(0,-100%,0));
    }
    .lui-transition-slide-in-enter-active {
      @include transform(translate3d(0,0,0));
    }
    .lui-transition-slide-in-leave {
      @include transform(translate3d(0,0,0));
    }
    .lui-transition-slide-in-leave-active {
      @include transform(translate3d(0,100%,0));
    }
  }

}