feat: add transition to select

jd-opensource · Jul 27, 2022 · 597dfb1 · 597dfb1
1 parent bef812a
commit 597dfb1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/packages/drip-table/src/components/select/index.module.less b/packages/drip-table/src/components/select/index.module.less
@@ -605,22 +605,22 @@
   box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px 0 #00000014, 0 9px 28px 8px #0000000d;
 }
 
-.@{prefixCls}-dropdown.ant-slide-up-appear.ant-slide-up-appear-active.@{prefixCls}-dropdown-placement-bottomLeft,
-.@{prefixCls}-dropdown.ant-slide-up-enter.ant-slide-up-enter-active.@{prefixCls}-dropdown-placement-bottomLeft {
-  animation-name: antSlideUpIn;
+.@{prefixCls}-dropdown.jfe-drip-table-motion-slide-up-appear.jfe-drip-table-motion-slide-up-appear-active.@{prefixCls}-dropdown-placement-bottomLeft,
+.@{prefixCls}-dropdown.jfe-drip-table-motion-slide-up-enter.jfe-drip-table-motion-slide-up-enter-active.@{prefixCls}-dropdown-placement-bottomLeft {
+  animation-name: jfe-drip-table-motion-slide-up-in;
 }
 
-.@{prefixCls}-dropdown.ant-slide-up-appear.ant-slide-up-appear-active.@{prefixCls}-dropdown-placement-topLeft,
-.@{prefixCls}-dropdown.ant-slide-up-enter.ant-slide-up-enter-active.@{prefixCls}-dropdown-placement-topLeft {
-  animation-name: antSlideDownIn;
+.@{prefixCls}-dropdown.jfe-drip-table-motion-slide-up-appear.jfe-drip-table-motion-slide-up-appear-active.@{prefixCls}-dropdown-placement-topLeft,
+.@{prefixCls}-dropdown.jfe-drip-table-motion-slide-up-enter.jfe-drip-table-motion-slide-up-enter-active.@{prefixCls}-dropdown-placement-topLeft {
+  animation-name: jfe-drip-table-motion-slide-down-in;
 }
 
-.@{prefixCls}-dropdown.ant-slide-up-leave.ant-slide-up-leave-active.@{prefixCls}-dropdown-placement-bottomLeft {
-  animation-name: antSlideUpOut;
+.@{prefixCls}-dropdown.jfe-drip-table-motion-slide-up-leave.jfe-drip-table-motion-slide-up-leave-active.@{prefixCls}-dropdown-placement-bottomLeft {
+  animation-name: jfe-drip-table-motion-slide-up-out;
 }
 
-.@{prefixCls}-dropdown.ant-slide-up-leave.ant-slide-up-leave-active.@{prefixCls}-dropdown-placement-topLeft {
-  animation-name: antSlideDownOut;
+.@{prefixCls}-dropdown.jfe-drip-table-motion-slide-up-leave.jfe-drip-table-motion-slide-up-leave-active.@{prefixCls}-dropdown-placement-topLeft {
+  animation-name: jfe-drip-table-motion-slide-down-out;
 }
 
 .@{prefixCls}-dropdown-hidden {

diff --git a/packages/drip-table/src/components/select/index.tsx b/packages/drip-table/src/components/select/index.tsx
@@ -26,6 +26,7 @@ const Select = Object.assign(
       className={classNames({
         [styles['jfe-drip-table-select-sm']]: mini,
       })}
+      transitionName="jfe-drip-table-motion-slide-up"
       listHeight={256}
       listItemHeight={24}
       inputIcon={(