UNPKG

quasar

Version:

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

146 lines (117 loc) 3.12 kB
$transition-easing = cubic-bezier(0.215, 0.61, 0.355, 1) // easeOutCubic .q-transition &--slide-right, &--slide-left, &--slide-up, &--slide-down, &--jump-right, &--jump-left, &--jump-up, &--jump-down, &--fade, &--scale, &--rotate, &--flip &-leave-active position absolute &--slide-right, &--slide-left, &--slide-up, &--slide-down &-enter-active, &-leave-active transition transform .3s $transition-easing &--slide-right &-enter transform translate3d(-100%, 0, 0) &-leave-to transform translate3d(100%, 0, 0) &--slide-left &-enter transform translate3d(100%, 0, 0) &-leave-to transform translate3d(-100%, 0, 0) &--slide-up &-enter transform translate3d(0, 100%, 0) &-leave-to transform translate3d(0, -100%, 0) &--slide-down &-enter transform translate3d(0, -100%, 0) &-leave-to transform translate3d(0, 100%, 0) &--jump-right, &--jump-left, &--jump-up, &--jump-down &-enter-active, &-leave-active transition opacity .3s, transform .3s &-enter, &-leave-to opacity 0 &--jump-right &-enter transform translate3d(-15px, 0, 0) &-leave-to transform translate3d(15px, 0, 0) &--jump-left &-enter transform translate3d(15px, 0, 0) &-leave-to transform translateX(-15px) &--jump-up &-enter transform translate3d(0, 15px, 0) &-leave-to transform translate3d(0, -15px, 0) &--jump-down &-enter transform translate3d(0, -15px, 0) &-leave-to transform translate3d(0, 15px, 0) &--fade &-enter-active, &-leave-active transition opacity .3s ease-out &-enter, &-leave, &-leave-to opacity 0 &--scale &-enter-active, &-leave-active transition opacity .3s, transform .3s $transition-easing &-enter, &-leave, &-leave-to opacity 0 transform scale3d(0, 0, 1) &--rotate &-enter-active, &-leave-active transition opacity .3s, transform .3s $transition-easing transform-style preserve-3d &-enter, &-leave, &-leave-to opacity 0 transform scale3d(0, 0, 1) rotate3d(0, 0, 1, 90deg) &--flip-right, &--flip-left, &--flip-up, &--flip-down &-enter-active, &-leave-active transition transform .3s backface-visibility hidden &-enter-to, &-leave transform perspective(400px) rotate3d(1, 1, 0, 0deg) &--flip-right &-enter transform perspective(400px) rotate3d(0, 1, 0, -180deg) &-leave-to transform perspective(400px) rotate3d(0, 1, 0, 180deg) &--flip-left &-enter transform perspective(400px) rotate3d(0, 1, 0, 180deg) &-leave-to transform perspective(400px) rotate3d(0, 1, 0, -180deg) &--flip-up &-enter transform perspective(400px) rotate3d(1, 0, 0, -180deg) &-leave-to transform perspective(400px) rotate3d(1, 0, 0, 180deg) &--flip-down &-enter transform perspective(400px) rotate3d(1, 0, 0, 180deg) &-leave-to transform perspective(400px) rotate3d(1, 0, 0, -180deg)