✨(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>