fix(comp:*): use a smarter slide animation (#1422)

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

Hide file tree

Showing 6 changed files with 42 additions and 4 deletions.
diff --git a/packages/components/cascader/src/Cascader.tsx b/packages/components/cascader/src/Cascader.tsx
@@ -189,7 +189,7 @@ export default defineComponent({
         disabled: accessor.disabled || props.readonly,
         offset: defaultOffset,
         placement: 'bottomStart',
-        transitionName: `${common.prefixCls}-slide-up`,
+        transitionName: `${common.prefixCls}-slide-auto`,
         trigger: 'manual',
         triggerId: attrs.id,
         visible: overlayOpened.value,

diff --git a/packages/components/dropdown/src/Dropdown.tsx b/packages/components/dropdown/src/Dropdown.tsx
@@ -43,7 +43,7 @@ export default defineComponent({
         offset: props.offset ?? config.offset,
         placement,
         showArrow: props.showArrow ?? config.showArrow,
-        transitionName: `${common.prefixCls}-${placement.startsWith('top') ? 'slide-down' : 'slide-up'}`,
+        transitionName: `${common.prefixCls}-slide-auto`,
         trigger,
         visible: visibility.value,
         ['onUpdate:visible']: setVisibility,

diff --git a/packages/components/menu/style/index.less b/packages/components/menu/style/index.less
@@ -78,5 +78,9 @@
     .@{menu-prefix} {
       box-shadow: none;
     }
+
+    &[data-popper-placement^='top'] {
+      transform-origin: 100% 100%;
+    }
   }
 }
diff --git a/packages/components/select/src/Select.tsx b/packages/components/select/src/Select.tsx
@@ -203,7 +203,7 @@ export default defineComponent({
         disabled: accessor.disabled || props.readonly,
         offset: props.offset ?? config.offset,
         placement: 'bottomStart',
-        transitionName: `${common.prefixCls}-slide-up`,
+        transitionName: `${common.prefixCls}-slide-auto`,
         trigger: 'manual',
         triggerId: attrs.id,
         visible: overlayOpened.value,

diff --git a/packages/components/style/motion/slide.less b/packages/components/style/motion/slide.less
@@ -27,3 +27,37 @@
 .slide-motion(slide-down, 100% 100%, scaleY(0.8));
 .slide-motion(slide-left, 0% 0%, scaleX(0.8));
 .slide-motion(slide-right, 100% 0, scaleX(0.8));
+
+.@{idux-prefix}-slide-auto-enter-active,
+.@{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%;
+  }
+
+  &[data-popper-placement^='left'] {
+    transform-origin: 100% 0;
+  }
+}
+
+.@{idux-prefix}-slide-auto-enter-active {
+  transition-timing-function: var(--ix-ease-out-quint);
+}
+
+.@{idux-prefix}-slide-auto-leave-active {
+  transition-timing-function: var(--ix-ease-in-quint);
+}
+
+.@{idux-prefix}-slide-auto-enter-from,
+.@{idux-prefix}-slide-auto-leave-to {
+  opacity: 0;
+  transform: scaleY(0.8);
+
+  &[data-popper-placement^='right'],
+  &[data-popper-placement^='left'] {
+    transform: scaleX(0.8);
+  }
+}
diff --git a/packages/components/tree-select/src/TreeSelect.tsx b/packages/components/tree-select/src/TreeSelect.tsx
@@ -184,7 +184,7 @@ export default defineComponent({
         disabled: accessor.disabled || props.readonly,
         offset: props.offset ?? config.offset,
         placement: 'bottomStart',
-        transitionName: `${common.prefixCls}-slide-up`,
+        transitionName: `${common.prefixCls}-slide-auto`,
         trigger: 'manual',
         triggerId: attrs.id,
         visible: overlayOpened.value,