✨(component): transition组件 新增time属性自定义过渡时长

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>

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;

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>

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` | --   |
 
 :::
 

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>