vue-ts/src/transitions.scss
// Fade
.v-enter-active,
.v-leave-active,
.fade-enter-active,
.fade-leave-active {
  opacity: 1;
  transition: opacity 0.3s;
}

.v-enter-from,
.v-leave-to,
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// right-to-left
.rtl-slide-enter-active,
.rtl-slide-leave-active {
  translate: 0;
  opacity: 1;
  transition:
    opacity 300ms,
    translate 300ms;
}

.rtl-slide-enter-from,
.rtl-slide-leave-to {
	translate: 2vh 0;
  opacity: 0;
}

// left-to-right
.ltr-slide-enter-active,
.ltr-slide-leave-active {
  translate: 0;
  opacity: 1;
  transition:
    opacity 300ms,
    translate 300ms;
}

.ltr-slide-enter-from,
.ltr-slide-leave-to {
	translate: -2vh 0;
  opacity: 0;
}

// top-to-bottom
.ttb-slide-enter-active,
.ttb-slide-leave-active {
  translate: 0;
  opacity: 1;
  transition:
    opacity 300ms,
    translate 300ms;
}

.ttb-slide-enter-from,
.ttb-slide-leave-to {
	translate: 0 -20vh;
  opacity: 0;
}

// bottom-to-top
.btt-slide-enter-active,
.btt-slide-leave-active {
  translate: 0;
  opacity: 1;
  transition:
    opacity 300ms,
    translate 300ms;
}

.btt-slide-enter-from,
.btt-slide-leave-to {
  translate: 0 20vh;
  opacity: 0;
}

// bottom-to-top
.btt-slide-enter-active,
.btt-slide-leave-active {
  scale: 1;
  opacity: 1;
  transition:
    opacity 300ms,
    scale 300ms;
}

.btt-slide-enter-from,
.btt-slide-leave-to {
  scale: 1.2;
  opacity: 0;
}
