diff --git a/components/miaoCollapse.vue b/components/miaoCollapse.vue index 0c83650..b24cb49 100644 --- a/components/miaoCollapse.vue +++ b/components/miaoCollapse.vue @@ -15,9 +15,7 @@ const props = defineProps({ }) const cwRef = ref() const cRef = ref() -const cwStyle = ref<{ [key: string]: string | number }>({ - maxHeight: '99999vh', -}) +const cwStyle = ref<{ [key: string]: string | number }>({}) const cStyle = ref<{ [key: string]: string | number }>({}) let originHeight = -1 @@ -33,19 +31,28 @@ const clearTimer = () => { const handleHide = () => { clearTimer() + calcOriginHeight(); cwStyle.value = { - maxHeight: 0, - opacity: 0, + maxHeight: `${originHeight}px`, + opacity: 1, transition: "all 0.2s ease-in-out, opacity 0.1s ease-out", - pointerEvents: 'none', } timer.push(setTimeout(() => { cwStyle.value = { maxHeight: 0, - display: 'none', opacity: 0, + transition: "all 0.2s ease-in-out, opacity 0.1s ease-out", + pointerEvents: 'none', } - }, 300)) + timer.push(setTimeout(() => { + cwStyle.value = { + maxHeight: 0, + display: 'none', + opacity: 0, + pointerEvents: 'none', + } + }, 300)) + })) } const handleShow = () => { @@ -53,13 +60,31 @@ const handleShow = () => { cwStyle.value = { maxHeight: 0, opacity: 0, + pointerEvents: 'none', } timer.push(setTimeout(() => { + calcOriginHeight(); cwStyle.value = { - maxHeight: `${originHeight}px`, - opacity: 1, - transition: "all 0.2s ease-in-out, opacity 0.3s ease-in" + maxHeight: 0, + opacity: 0, + transition: "all 0.2s ease-in-out, opacity 0.3s ease-in", + pointerEvents: 'none', } + timer.push(setTimeout(() => { + cwStyle.value = { + maxHeight: `${originHeight}px`, + opacity: 1, + transition: "all 0.2s ease-in-out, opacity 0.3s ease-in" + } + timer.push(setTimeout(() => { + cwStyle.value = { + opacity: 1, + } + nextTick(() => { + calcOriginHeight() + }) + }, 300)) + })) })) } @@ -73,11 +98,12 @@ watch(() => props.show, (newVal) => { } }) +const calcOriginHeight = () => { + originHeight = cRef.value!.clientHeight +} + onMounted(() => { - originHeight = cwRef.value!.clientHeight - cwStyle.value = { - maxHeight: `${originHeight}px`, - } + calcOriginHeight() })