refactor(comp:*): update transition duration (#1425)

IDuxFE · Jan 17, 2023 · 3e69791 · 3e69791
1 parent 33fb35f
commit 3e69791
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 18 deletions.
diff --git a/packages/components/_private/collapse-transition/style/index.less b/packages/components/_private/collapse-transition/style/index.less
@@ -2,8 +2,16 @@
   &-enter-active,
   &-leave-active {
     overflow: hidden;
-    transition: height var(--ix-transition-duration-medium) var(--ix-ease-in-out),
-      width var(--ix-transition-duration-medium) var(--ix-ease-in-out),
-      opacity var(--ix-transition-duration-medium) var(--ix-ease-in-out);
+    transition-property: height, width, opacity;
+  }
+
+  &-enter-active {
+    transition-duration: var(--ix-transition-duration-slow);
+    transition-timing-function: var(--ix-ease-out-quint);
+  }
+
+  &-leave-active {
+    transition-duration: var(--ix-transition-duration-medium);
+    transition-timing-function: var(--ix-ease-out-quint);
   }
 }
diff --git a/packages/components/date-picker/src/composables/useOverlayProps.ts b/packages/components/date-picker/src/composables/useOverlayProps.ts
@@ -22,7 +22,7 @@ export function useOverlayProps(context: DatePickerContext | DateRangePickerCont
       disabled: accessor.disabled || props.readonly,
       offset: defaultOffset,
       placement: 'bottomStart',
-      transitionName: `${common.prefixCls}-fade`,
+      transitionName: `${common.prefixCls}-slide-auto`,
       trigger: 'manual',
       visible: overlayOpened.value,
       'onUpdate:visible': setOverlayOpened,

diff --git a/packages/components/style/motion/slide.less b/packages/components/style/motion/slide.less
@@ -1,18 +1,19 @@
 @import '../variable/animation.less';
 
-.slide-motion(@className, @origin, @scale, @duration: var(--ix-transition-duration-medium)) {
+.slide-motion(@className, @origin, @scale) {
   .@{idux-prefix}-@{className}-enter-active,
   .@{idux-prefix}-@{className}-leave-active {
     transform-origin: @origin;
     transition-property: transform, opacity;
-    transition-duration: @duration;
   }
 
   .@{idux-prefix}-@{className}-enter-active {
+    transition-duration: var(--ix-transition-duration-medium);
     transition-timing-function: var(--ix-ease-out-quint);
   }
 
   .@{idux-prefix}-@{className}-leave-active {
+    transition-duration: var(--ix-transition-duration-fast);
     transition-timing-function: var(--ix-ease-in-quint);
   }
 
@@ -32,7 +33,6 @@
 .@{idux-prefix}-slide-auto-leave-active {
   transform-origin: 0% 0%;
   transition-property: transform, opacity;
-  transition-duration: var(--ix-transition-duration-medium);
 
   &[data-popper-placement^='top'] {
     transform-origin: 100% 100%;
@@ -44,10 +44,12 @@
 }
 
 .@{idux-prefix}-slide-auto-enter-active {
+  transition-duration: var(--ix-transition-duration-medium);
   transition-timing-function: var(--ix-ease-out-quint);
 }
 
 .@{idux-prefix}-slide-auto-leave-active {
+  transition-duration: var(--ix-transition-duration-fast);
   transition-timing-function: var(--ix-ease-in-quint);
 }
 

diff --git a/packages/components/style/themes/default.less b/packages/components/style/themes/default.less
@@ -94,8 +94,8 @@
   --ix-spacing-2xl: 32px;
 
   // Motion
-  --ix-transition-duration-fast: 0.1s;
-  --ix-transition-duration-medium: 0.2s;
+  --ix-transition-duration-fast: 0.18s;
+  --ix-transition-duration-medium: 0.24s;
   --ix-transition-duration-slow: 0.3s;
   // https://easings.net
   --ix-ease-in: cubic-bezier(0.12, 0, 0.39, 0);

diff --git a/packages/components/style/themes/seer.less b/packages/components/style/themes/seer.less
@@ -24,11 +24,6 @@
 
   // Font-Size
   --ix-font-size: 12px;
-
-  // Motion
-  --ix-transition-duration-fast: 0.2s;
-  --ix-transition-duration-medium: 0.24s;
-  --ix-transition-duration-slow: 0.28s;
 }
 
 // 临时兼容，后面需要移除

diff --git a/packages/components/style/variable/animation.less b/packages/components/style/variable/animation.less
@@ -25,9 +25,9 @@
 @ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
 
 /* transition duration ------------------ */
-@transition-duration-slow: 0.28s;
+@transition-duration-slow: 0.3s;
 @transition-duration-base: 0.24s;
-@transition-duration-fast: 0.2s;
+@transition-duration-fast: 0.18s;
 
 @transition-all-slow: all @transition-duration-slow;
 @transition-all-base: all @transition-duration-base;

diff --git a/packages/components/time-picker/src/composables/useOverlayProps.ts b/packages/components/time-picker/src/composables/useOverlayProps.ts
@@ -23,7 +23,7 @@ export function useOverlayProps(context: TimePickerContext | TimeRangePickerCont
       disabled: accessor.disabled || props.readonly,
       offset: defaultOffset,
       placement: 'bottomStart',
-      transitionName: `${common.prefixCls}-fade`,
+      transitionName: `${common.prefixCls}-slide-auto`,
       trigger: 'manual',
       visible: overlayOpened.value,
       'onUpdate:visible': setOverlayOpened,

diff --git a/packages/pro/search/src/ProSearch.tsx b/packages/pro/search/src/ProSearch.tsx
@@ -58,7 +58,7 @@ export default defineComponent({
       searchItems,
       searchStateContext.tempSearchStateAvailable,
     )
-    const commonOverlayProps = useCommonOverlayProps(props, config, mergedPrefixCls)
+    const commonOverlayProps = useCommonOverlayProps(props, config, componentCommon, mergedPrefixCls)
     const { focused, focus, blur } = useFocusedState(
       props,
       elementRef,

diff --git a/packages/pro/search/src/composables/useCommonOverlayProps.ts b/packages/pro/search/src/composables/useCommonOverlayProps.ts
@@ -8,19 +8,22 @@
 import { type ComputedRef, computed } from 'vue'
 
 import { type ɵOverlayProps } from '@idux/components/_private/overlay'
+import { type CommonConfig } from '@idux/components/config'
 import { type ProSearchConfig } from '@idux/pro/config'
 
 import { type ProSearchProps } from '../types'
 
 export function useCommonOverlayProps(
   props: ProSearchProps,
   config: ProSearchConfig,
+  componentCommonConfig: CommonConfig,
   mergedPrefixCls: ComputedRef<string>,
 ): ComputedRef<ɵOverlayProps> {
   return computed(() => ({
     container: props.overlayContainer ?? config.overlayContainer,
     containerFallback: `.${mergedPrefixCls.value}-overlay-container`,
     placement: 'bottomStart',
+    transitionName: `${componentCommonConfig.prefixCls}-slide-auto`,
     offset: [0, 4],
   }))
 }