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

example/docs/zh-CN/components/transition.md

@@ -1,7 +1,7 @@
 ::: anchor
 :::
 
-::: title 基础使用
+::: title 基本介绍
 :::
 
 ::: describe 过渡效果的使用将大幅提升用户的使用体验。
@@ -17,14 +17,7 @@
   <br/>
   <br/>
   <lay-transition>
-    <div v-show="visible" style="width:300px;background: #79C48C;border-radius: 4px;padding:20px;">
+      <lay-card title="标题" v-if="visible">内容</lay-card>
-        <li>1</li>
-        <li>1</li>
-        <li>1</li>
-        <li>1</li>
-        <li>1</li>
-        <li>1</li>
-    </div>
   </lay-transition>
 </template>
 
@@ -48,3 +41,38 @@ export default {
 </script>
 
 :::
+
+::: title 基础使用
+:::
+
+::: demo 使用 `lay-transition` 标签, 为元素提供过渡动画
+
+<template>
+  <lay-button @click="changeVisible1">开始</lay-button>
+  <br/>
+  <br/>
+  <lay-transition type="fade">
+      <lay-card title="标题" v-if="visible1">内容</lay-card>
+  </lay-transition>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const visible1 = ref(true);
+
+    const changeVisible1 = () => {
+        visible1.value = !visible1.value;
+    }
+
+    return {
+        changeVisible1
+    }
+  }
+}
+</script>
+
+:::

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
+  <LayCollapseTransition v-if="type==='collapse'"><slot></slot></LayCollapseTransition>
-    v-on:before-enter="beforeEnter"
+  <LayFadeTransition v-if="type==='fade'"><slot></slot></LayFadeTransition>
-    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">
@@ -20,67 +10,14 @@ export default {
 </script>
 
 <script setup lang="ts">
-const elTransition =
+import LayCollapseTransition from "./collapseTransition.vue";
-  "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
+import LayFadeTransition from "./fadeTransition.vue";
 
-const beforeEnter = (el: any) => {
+export interface LayTransitionProps {
-  el.style.transition = elTransition;
+  type?: string
-  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) => {
+const props = withDefaults(defineProps<LayTransitionProps>(), {
-  el.style.transition = "";
+  type: 'collapse',
-  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/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";