quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
42 lines (33 loc) • 1.01 kB
JavaScript
import { computed } from 'vue'
export const useTransitionProps = {
transitionShow: {
type: String,
default: 'fade'
},
transitionHide: {
type: String,
default: 'fade'
},
transitionDuration: {
type: [ String, Number ],
default: 300
}
}
export default function (props, defaultShowFn = () => {}, defaultHideFn = () => {}) {
return {
transitionProps: computed(() => {
const show = `q-transition--${ props.transitionShow || defaultShowFn() }`
const hide = `q-transition--${ props.transitionHide || defaultHideFn() }`
return {
appear: true,
enterFromClass: `${ show }-enter-from`,
enterActiveClass: `${ show }-enter-active`,
enterToClass: `${ show }-enter-to`,
leaveFromClass: `${ hide }-leave-from`,
leaveActiveClass: `${ hide }-leave-active`,
leaveToClass: `${ hide }-leave-to`
}
}),
transitionStyle: computed(() => `--q-transition-duration: ${ props.transitionDuration }ms`)
}
}