feat: 新增 transition 组件 type 属性, 默认为 collapse

src/component/transition/collapseTransition.vue

@@ -0,0 +1,86 @@
+<template>
+  <transition
+    v-on:before-enter="beforeEnter"
+    v-on:enter="enter"
+    v-on:after-enter="afterEnter"
+    v-on:enter-cancelled="enterCancelled"
+    v-on:before-leave="beforeLeave"
+    v-on:leave="leave"
+    v-on:after-leave="afterLeave"
+    v-on:leave-cancelled="leaveCancelled"
+  >
+    <slot></slot>
+  </transition>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LayCollapseTransition",
+};
+</script>
+
+<script setup lang="ts">
+const elTransition =
+  "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
+
+const beforeEnter = (el: any) => {
+  el.style.transition = elTransition;
+  if (!el.dataset) el.dataset = {};
+  el.dataset.oldPaddingTop = el.style.paddingTop;
+  el.dataset.oldPaddingBottom = el.style.paddingBottom;
+  el.style.height = 0;
+  el.style.paddingTop = 0;
+  el.style.paddingBottom = 0;
+};
+
+const enter = (el: any) => {
+  el.dataset.oldOverflow = el.style.overflow;
+  if (el.scrollHeight !== 0) {
+    el.style.height = el.scrollHeight + "px";
+    el.style.paddingTop = el.dataset.oldPaddingTop;
+    el.style.paddingBottom = el.dataset.oldPaddingBottom;
+  } else {
+    el.style.height = "";
+    el.style.paddingTop = el.dataset.oldPaddingTop;
+    el.style.paddingBottom = el.dataset.oldPaddingBottom;
+  }
+  el.style.overflow = "hidden";
+};
+
+const afterEnter = (el: any) => {
+  el.style.transition = "";
+  el.style.height = "";
+  el.style.overflow = el.dataset.oldOverflow;
+};
+
+const beforeLeave = (el: any) => {
+  if (!el.dataset) el.dataset = {};
+  el.dataset.oldPaddingTop = el.style.paddingTop;
+  el.dataset.oldPaddingBottom = el.style.paddingBottom;
+  el.dataset.oldOverflow = el.style.overflow;
+  var computedStyle = getComputedStyle(el, null);
+  el.style.height =
+    el.scrollHeight -
+    parseInt(computedStyle.paddingTop) -
+    parseInt(computedStyle.paddingBottom) +
+    "px";
+  el.style.overflow = "hidden";
+};
+
+const leave = (el: any) => {
+  if (el.scrollHeight !== 0) {
+    el.style.transition = elTransition;
+    el.style.height = 0;
+    el.style.paddingTop = 0;
+    el.style.paddingBottom = 0;
+  }
+};
+
+const afterLeave = (el: any) => {
+  el.style.transition = "";
+  el.style.height = "";
+  el.style.overflow = el.dataset.oldOverflow;
+  el.style.paddingTop = el.dataset.oldPaddingTop;
+  el.style.paddingBottom = el.dataset.oldPaddingBottom;
+};
+</script>

src/component/transition/fadeTransition.vue

@@ -0,0 +1,21 @@
+
+<template>
+  <transition name="fade">
+    <slot></slot>
+  </transition>
+</template>
+
+<style>
+.fade-enter {
+  opacity: 0;
+}
+.fade-enter-active {
+  transition: opacity 1s;
+}
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-leave-active {
+  transition: opacity 1s;
+}
+</style>

src/component/transition/index.vue

@@ -1,16 +1,6 @@
 <template>
-  <transition
-    v-on:before-enter="beforeEnter"
-    v-on:enter="enter"
-    v-on:after-enter="afterEnter"
-    v-on:enter-cancelled="enterCancelled"
-    v-on:before-leave="beforeLeave"
-    v-on:leave="leave"
-    v-on:after-leave="afterLeave"
-    v-on:leave-cancelled="leaveCancelled"
-  >
-    <slot></slot>
-  </transition>
+  <LayCollapseTransition v-if="type==='collapse'"><slot></slot></LayCollapseTransition>
+  <LayFadeTransition v-if="type==='fade'"><slot></slot></LayFadeTransition>
 </template>
 
 <script lang="ts">
@@ -20,67 +10,14 @@ export default {
 </script>
 
 <script setup lang="ts">
-const elTransition =
-  "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
+import LayCollapseTransition from "./collapseTransition.vue";
+import LayFadeTransition from "./fadeTransition.vue";
 
-const beforeEnter = (el: any) => {
-  el.style.transition = elTransition;
-  if (!el.dataset) el.dataset = {};
-  el.dataset.oldPaddingTop = el.style.paddingTop;
-  el.dataset.oldPaddingBottom = el.style.paddingBottom;
-  el.style.height = 0;
-  el.style.paddingTop = 0;
-  el.style.paddingBottom = 0;
-};
+export interface LayTransitionProps {
+  type?: string
+}
 
-const enter = (el: any) => {
-  el.dataset.oldOverflow = el.style.overflow;
-  if (el.scrollHeight !== 0) {
-    el.style.height = el.scrollHeight + "px";
-    el.style.paddingTop = el.dataset.oldPaddingTop;
-    el.style.paddingBottom = el.dataset.oldPaddingBottom;
-  } else {
-    el.style.height = "";
-    el.style.paddingTop = el.dataset.oldPaddingTop;
-    el.style.paddingBottom = el.dataset.oldPaddingBottom;
-  }
-  el.style.overflow = "hidden";
-};
-
-const afterEnter = (el: any) => {
-  el.style.transition = "";
-  el.style.height = "";
-  el.style.overflow = el.dataset.oldOverflow;
-};
-
-const beforeLeave = (el: any) => {
-  if (!el.dataset) el.dataset = {};
-  el.dataset.oldPaddingTop = el.style.paddingTop;
-  el.dataset.oldPaddingBottom = el.style.paddingBottom;
-  el.dataset.oldOverflow = el.style.overflow;
-  var computedStyle = getComputedStyle(el, null);
-  el.style.height =
-    el.scrollHeight -
-    parseInt(computedStyle.paddingTop) -
-    parseInt(computedStyle.paddingBottom) +
-    "px";
-  el.style.overflow = "hidden";
-};
-
-const leave = (el: any) => {
-  if (el.scrollHeight !== 0) {
-    el.style.transition = elTransition;
-    el.style.height = 0;
-    el.style.paddingTop = 0;
-    el.style.paddingBottom = 0;
-  }
-};
-
-const afterLeave = (el: any) => {
-  el.style.transition = "";
-  el.style.height = "";
-  el.style.overflow = el.dataset.oldOverflow;
-  el.style.paddingTop = el.dataset.oldPaddingTop;
-  el.style.paddingBottom = el.dataset.oldPaddingBottom;
-};
+const props = withDefaults(defineProps<LayTransitionProps>(), {
+  type: 'collapse',
+});
 </script>

src/component/tree/index.vue

@@ -2,8 +2,6 @@
 export default {
   name: "LayTree",
 };
-
-// import { TreeEmits, TreeProps as Tp } from './tree.type'
 </script>
 <script lang="ts" setup>
 import TreeNode from "./TreeNode.vue";