1 line
9.5 KiB
Plaintext
1 line
9.5 KiB
Plaintext
|
{"version":3,"file":"wd-transition.js","sources":["../../../../../../../node_modules/wot-design-uni/components/wd-transition/wd-transition.vue","../../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL25vZGVfbW9kdWxlcy93b3QtZGVzaWduLXVuaS9jb21wb25lbnRzL3dkLXRyYW5zaXRpb24vd2QtdHJhbnNpdGlvbi52dWU"],"sourcesContent":["<template>\n <view v-if=\"inited\" :class=\"rootClass\" :style=\"style\" @transitionend=\"onTransitionEnd\" @click=\"handleClick\">\n <slot />\n </view>\n</template>\n\n<script lang=\"ts\">\nexport default {\n name: 'wd-transition',\n options: {\n addGlobalClass: true,\n virtualHost: true,\n styleIsolation: 'shared'\n }\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onBeforeMount, ref, watch } from 'vue'\nimport { isObj, isPromise, requestAnimationFrame } from '../common/util'\nimport { transitionProps } from './types'\nimport { AbortablePromise } from '../common/AbortablePromise'\n\nconst getClassNames = (name?: string) => {\n if (!name) {\n return {\n enter: `${props.enterClass} ${props.enterActiveClass}`,\n 'enter-to': `${props.enterToClass} ${props.enterActiveClass}`,\n leave: `${props.leaveClass} ${props.leaveActiveClass}`,\n 'leave-to': `${props.leaveToClass} ${props.leaveActiveClass}`\n }\n }\n\n return {\n enter: `wd-${name}-enter wd-${name}-enter-active`,\n 'enter-to': `wd-${name}-enter-to wd-${name}-enter-active`,\n leave: `wd-${name}-leave wd-${name}-leave-active`,\n 'leave-to': `wd-${name}-leave-to wd-${name}-leave-active`\n }\n}\n\nconst props = defineProps(transitionProps)\nconst emit = defineEmits(['click', 'before-enter', 'enter', 'before-leave', 'leave', 'after-leave', 'after-enter'])\n\n// 初始化是否完成\nconst inited = ref<boolean>(false)\n// 是否显示\nconst display = ref<boolean>(false)\n// 当前动画状态\nconst status = ref<string>('')\n// 动画是否结束\nconst transitionEnded = ref<boolean>(false)\n// 动画持续时间\nconst currentDuration = ref<number>(300)\n// 类名\nconst classes = ref<string>('')\n// 用于控制enter和leave的顺序执行\nconst enterPromise = ref<AbortablePromise<void> | null>(null)\n\n// 动画进入的生命周期\nconst enterLifeCyclePromises = ref<AbortablePromise<unknown> | null>(null)\n\n// 动画离开的生命周期\nconst leaveLifeCyclePromises = ref<AbortablePromise<unknown> | null>(null)\n\nconst style = computed(() => {\n return `-webkit-transition-duration:${currentDuration.value}ms;transition-duration:${currentDuration.value}ms;${\n display.value ? '' : 'display: none;'\n }${props.customStyle}`\n})\n\nconst rootClass = computed(() => {\n return `wd-transition ${props.customClass} ${classes.value}`\n})\n\nonBeforeMount(() => {\n if (props.show) {\n enter()\n }\n})\n\nwatch(\n () => props.show,\n (newVal) => {\n handleShow(newVal)\n },\n { deep: true }\n)\n\nfunction handleClick() {\n emit('click')\n}\n\nfunction handleShow(value: boolean) {\n if (value) {\n handleAbortPromise()\n enter()\n } else {\n leave()\n }\n}\n/**\n * 取消所有的promise\n */\nfunction handleAbortPromise() {\n isPromise(enterPromise.value) && enterPromise.value.abort()\n isPromise(enterLifeCyclePromises.value) && enterLifeCyclePromises.value.abort()\n isPromise(leaveLifeCyclePromises.value) && leaveLifeCyclePromises.value.abort()\n enterPromise.value = null\n enterLifeCyclePromises.value = null\n leaveLifeCyclePromises.value = null\n}\n\nfunction enter() {\n enterPromise.value = new AbortablePromise(async (resolve) => {\n try {\n const classNames = getClassNames(props.name)\n const duration = isObj(props.duration) ? (props.duration as any).enter : props.duration\n status.value = 'enter'\n emit('before-enter')\n enterLifeCyclePromises.value = requestAnimationFrame()\n await enterLifeCyclePromises.value\n emit('enter')\n classes.value = classNames.enter\n currentDuration.value = duration\n enterLifeCyclePromises.value = requestAnimationFrame()\n await enterLifeCyclePromises
|