feat: 优化首页折叠面板实现

components/miaoCollapse.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="miao-collapse-warpper" ref="cwRef" :style="cwStyle">
+        <div class="miao-collapse" ref="cRef" :style="cStyle">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: true,
+    }
+})
+const cwRef = ref<HTMLDivElement>()
+const cRef = ref<HTMLDivElement>()
+const cwStyle = ref<{ [key: string]: string | number }>({
+    maxHeight: '99999vh',
+})
+const cStyle = ref<{ [key: string]: string | number }>({})
+
+let originHeight = -1
+
+let timer: any[] = []
+
+const clearTimer = () => {
+    timer.forEach((item) => {
+        clearTimeout(item)
+    })
+    timer = []
+}
+
+const handleHide = () => {
+    clearTimer()
+    cwStyle.value = {
+        maxHeight: 0,
+        opacity: 0,
+    }
+    timer.push(setTimeout(() => {
+        cwStyle.value = {
+            maxHeight: 0,
+            display: 'none',
+            opacity: 0,
+        }
+    }, 300))
+}
+
+const handleShow = () => {
+    clearTimer()
+    cwStyle.value = {
+        maxHeight: 0,
+        opacity: 0,
+    }
+    timer.push(setTimeout(() => {
+        cwStyle.value = {
+            maxHeight: `${originHeight}px`,
+            opacity: 1,
+        }
+    }))
+}
+
+watch(() => props.show, (newVal) => {
+    if (cwRef.value && cRef.value) {
+        if (newVal) {
+            handleShow()
+        } else {
+            handleHide()
+        }
+    }
+})
+
+onMounted(() => {
+    originHeight = cwRef.value!.clientHeight
+    cwStyle.value = {
+        maxHeight: `${originHeight}px`,
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.miao-collapse-warpper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    opacity: 1;
+    transition: all 0.3s ease-in-out, opacity 0.2s ease-in-out;
+
+    .miao-collapse {
+        position: relative;
+    }
+}
+</style>

pages/index.vue

@@ -16,7 +16,8 @@
             </div>
           </miao-divider-left>
         </div>
-        <div :class="['content-items-wrap', item.show ? '' : 'content-items-wrap-hide']">
+        <miao-collapse :show="item.show">
+          <div :class="['content-items-wrap']">
             <div v-for="(cItem) in item.content" :key="cItem.name" class="content-item">
               <div class="content-item-name">{{ cItem.name }}</div>
               <div class="content-item-description">{{ cItem.description }}</div>
@@ -27,6 +28,7 @@
               </div>
             </div>
           </div>
+        </miao-collapse>
       </div>
     </div>
   </div>
@@ -38,6 +40,7 @@ import miaoDividerLeft from '~/components/miaoDivider-left.vue';
 // @ts-ignore
 import ChevronDown from "~/components/icons/chevronDown.vue";
 import linkIcon from '~/components/icons/link.vue';
+import miaoCollapse from '~/components/miaoCollapse.vue';
 
 type PageContent = {
   subTitle: string,
@@ -239,6 +242,7 @@ const switchItemShow = (item: PageContent) => {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
         justify-content: center;
+        // align-items: end;
         gap: 20px;
         // overflow: hidden;
         transition: max-height 0.25s ease, opacity 0.25s ease;
@@ -247,7 +251,7 @@ const switchItemShow = (item: PageContent) => {
         // margin: 0 -20px;
         &-hide {
           max-height: 0;
-          opacity: 0;
+          // opacity: 0;
         }
       }