vuetify/src/stylus/generic/_transitions.styl

Vue.js 2 Semantic Component Framework

// Component specific transitions
.bottom-sheet-transition
  &-enter
    transform: translateY(100%)

  &-leave-to
    transform: translateY(100%)

.carousel-transition
  &-enter
    transform: translate(100%, 0)

  &-leave, &-leave-to
    position: absolute
    top: 0
    transform: translate(-100%, 0)

.carousel-reverse-transition
  &-enter
    transform: translate(-100%, 0)

  &-leave, &-leave-to
    position: absolute
    top: 0
    transform: translate(100%, 0)

.dialog-transition
  &-enter, &-leave-to
    transform: scale(0.5)
    opacity: 0

  &-enter-to, &-leave
    opacity: 1

.dialog-bottom-transition
  &-enter, &-leave-to
    transform: translateY(100%)

.tab-transition
  &-enter
    transform: translate(100%, 0)

  &-enter-to
    transform: translate(0, 0)

  &-leave, &-leave-active
    position: absolute
    top: 0

  &-leave-to
    position: absolute
    transform: translate(-100%, 0)

.tab-reverse-transition
  &-enter
    transform: translate(-100%, 0)

  &-leave, &-leave-to
    top: 0
    position: absolute
    transform: translate(100%, 0)

// Generic transitions
.scale-transition
  &-enter-active, &-leave-active
    transition: $primary-transition

  &-enter, &-leave, &-leave-to
    opacity: 0
    transform: scale(0)

.slide-y-transition
  &-enter-active, &-leave-active
    transition: $primary-transition

  &-enter, &-leave-to
    opacity: 0
    transform: translateY(-15px)

.slide-y-reverse-transition
  &-enter-active, &-leave-active
    transition: $primary-transition

  &-enter, &-leave-to
    opacity: 0
    transform: translateY(15px)

.slide-x-transition
  &-enter-active, &-leave-active
    transition: $primary-transition

  &-enter, &-leave-to
    opacity: 0
    transform: translateX(-15px)

.slide-x-reverse-transition
  &-enter-active, &-leave-active
    transition: $primary-transition

  &-enter, &-leave-to
    opacity: 0
    transform: translateX(15px)

.fade-transition
  &-enter-active, &-leave-active
    transition: $primary-transition

  &-enter, &-leave-to
    opacity: 0

.fab-transition
  &-enter-active, &-leave-active
    transition: $primary-transition

  &-enter, &-leave-to
    transform: scale(0) rotate(-45deg)