From afec6ca6cda30daf43441e14626021f2072014fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?0o=E5=BC=A0=E4=B8=8D=E6=AD=AAo0?= <zhangzheng7856@126.com>
Date: Mon, 11 Jul 2022 14:34:21 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20transition=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20=E6=96=B0=E5=A2=9Etime=E5=B1=9E=E6=80=A7=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=BF=87=E6=B8=A1=E6=97=B6=E9=95=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package/component/src/component/transition/index.vue     | 9 ++++++---
 .../transition/transitions/collapseTransition.vue        | 6 ++++--
 .../component/transition/transitions/fadeTransition.vue  | 7 ++++++-
 .../src/document/zh-CN/components/transition.md          | 1 +
 .../src/document/zh-CN/guide/changelog.md                | 2 ++
 5 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/package/component/src/component/transition/index.vue b/package/component/src/component/transition/index.vue
index 3db66c40..0cc75c58 100644
--- a/package/component/src/component/transition/index.vue
+++ b/package/component/src/component/transition/index.vue
@@ -1,8 +1,6 @@
 <template>
   <template v-if="enable">
-    <LayCollapseTransition v-if="type === 'collapse'"
-      ><slot></slot
-    ></LayCollapseTransition>
+    <LayCollapseTransition v-if="type === 'collapse'"><slot></slot></LayCollapseTransition>
     <LayFadeTransition v-if="type === 'fade'"><slot></slot></LayFadeTransition>
   </template>
   <template v-else>
@@ -17,16 +15,21 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { provide } from "vue";
 import LayCollapseTransition from "./transitions/collapseTransition.vue";
 import LayFadeTransition from "./transitions/fadeTransition.vue";
 
 export interface LayTransitionProps {
   type?: string;
   enable?: boolean;
+  time?:string|number;
 }
 
 const props = withDefaults(defineProps<LayTransitionProps>(), {
   type: "collapse",
   enable: true,
+  time:0.3
 });
+
+provide('time',props.time)
 </script>
diff --git a/package/component/src/component/transition/transitions/collapseTransition.vue b/package/component/src/component/transition/transitions/collapseTransition.vue
index 8b27596a..74413b38 100644
--- a/package/component/src/component/transition/transitions/collapseTransition.vue
+++ b/package/component/src/component/transition/transitions/collapseTransition.vue
@@ -18,8 +18,10 @@ 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 { inject } from 'vue';
+
+const time=inject('time')
+const elTransition = `${time}s height ease-in-out, ${time}s padding-top ease-in-out, ${time}s padding-bottom ease-in-out`;
 
 const beforeEnter = (el: any) => {
   el.style.transition = elTransition;
diff --git a/package/component/src/component/transition/transitions/fadeTransition.vue b/package/component/src/component/transition/transitions/fadeTransition.vue
index bb0e9045..36f229b2 100644
--- a/package/component/src/component/transition/transitions/fadeTransition.vue
+++ b/package/component/src/component/transition/transitions/fadeTransition.vue
@@ -3,7 +3,12 @@
     <slot></slot>
   </transition>
 </template>
+<script setup lang="ts">
+import { inject,ref } from 'vue';
 
+const time=inject('time')
+const transition=ref(`opacity ${time}s ease`);
+</script>
 <style>
 .fade-enter-from,
 .fade-leave-to {
@@ -15,6 +20,6 @@
 }
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 1s ease;
+  transition: v-bind(transition);
 }
 </style>
diff --git a/package/document-component/src/document/zh-CN/components/transition.md b/package/document-component/src/document/zh-CN/components/transition.md
index 317847e2..d1c768bc 100644
--- a/package/document-component/src/document/zh-CN/components/transition.md
+++ b/package/document-component/src/document/zh-CN/components/transition.md
@@ -86,6 +86,7 @@ export default {
 | ------------ | ---------------- | ------------- | ---- | ----   |
 | enable       | 启用               | `boolean`   | `true` | `true` `false`   |
 | type         | 类型               | `string`   |  `collapse` | --   |
+| time         | 过渡时间            | `string`|`boolean`|  `0.3` | --   |
 
 :::
 
diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md
index 8ede4162..680b7e21 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -21,6 +21,8 @@
           <li>[优化] tree 组件 关闭连线后启用行内点击 by @SmallWai</li> 
           <li>[优化] tree 组件 默认启用过渡动画 by @SmallWai</li> 
           <li>[新增] tree 组件 加入半选状态 by @SmallWai</li> 
+          <li>[修复] datePicker 组件 更新modelValue视图未更新问题 by @SmallWai</li> 
+          <li>[新增] transition 组件 time属性自定义过渡时长 by @SmallWai</li> 
         </ul>
       </li>
     </ul>