From db89231b24761c899ed823060dda8453fedaf133 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Tue, 17 Jan 2023 11:34:48 +0800
Subject: [PATCH] fix(comp:*): use a smarter slide animation

---
 packages/components/cascader/src/Cascader.tsx |  2 +-
 packages/components/dropdown/src/Dropdown.tsx |  2 +-
 packages/components/menu/style/index.less     |  4 +++
 packages/components/select/src/Select.tsx     |  2 +-
 packages/components/style/motion/slide.less   | 34 +++++++++++++++++++
 .../components/tree-select/src/TreeSelect.tsx |  2 +-
 6 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/components/cascader/src/Cascader.tsx b/packages/components/cascader/src/Cascader.tsx
index 632a4cc75..849e3a19a 100644
--- 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
index 90a540331..eab3faf41 100644
--- 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
index f942da0c6..3bbf3c6c0 100644
--- 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
index 67321ad0a..42b47e9ff 100644
--- 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
index 39f1e3cbd..5e28363ce 100644
--- 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
index 2792cdc4a..b12c348f3 100644
--- 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,