@keyframes VSlideTopIn {
  from {
    transform: translate3d(0, -100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes VSlideTopOut {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes VSlideBottomIn {
  from {
    transform: translate3d(0, 100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes VSlideBottomOut {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes VSlideRightIn {
  from {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes VSlideRightOut {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes VSlideLeftIn {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes VSlideLeftOut {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100%, 0, 0);
  }
}

.slide-top-enter-active {
  animation: VSlideTopIn 0.3s;
}

.slide-top-leave-active {
  animation: VSlideTopOut 0.3s;
}

.slide-right-enter-active {
  animation: VSlideRightIn 0.3s;
}

.slide-right-leave-active {
  animation: VSlideRightOut 0.3s;
}

.slide-bottom-enter-active {
  animation: VSlideBottomIn 0.3s;
}

.slide-bottom-leave-active {
  animation: VSlideBottomOut 0.3s;
}

.slide-left-enter-active {
  animation: VSlideLeftIn 0.3s;
}

.slide-left-leave-active {
  animation: VSlideLeftOut 0.3s;
}