fix: Slider Tooltip appear motion not working (#39857)

* fix: use native tooltip * chore: clean up * test: Update snapshot * test: Update snapshot
ant-design · Dec 27, 2022 · 809252b · 809252b
1 parent 0a0291b
commit 809252b
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 17 deletions.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -25487,7 +25487,7 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
   />
   <div>
     <div
-      class="config-tooltip config-slider-tooltip config-zoom-down-appear config-zoom-down-appear-prepare config-zoom-down"
+      class="config-tooltip config-slider-tooltip config-zoom-big-fast-appear config-zoom-big-fast-appear-prepare config-zoom-big-fast"
       style="opacity: 0;"
     >
       <div
@@ -25538,7 +25538,7 @@ exports[`ConfigProvider components Slider configProvider componentDisabled 1`] =
   />
   <div>
     <div
-      class="config-tooltip config-slider-tooltip config-zoom-down-appear config-zoom-down-appear-prepare config-zoom-down"
+      class="config-tooltip config-slider-tooltip config-zoom-big-fast-appear config-zoom-big-fast-appear-prepare config-zoom-big-fast"
       style="opacity: 0;"
     >
       <div
@@ -25589,7 +25589,7 @@ exports[`ConfigProvider components Slider configProvider componentSize large 1`]
   />
   <div>
     <div
-      class="config-tooltip config-slider-tooltip config-zoom-down-appear config-zoom-down-appear-prepare config-zoom-down"
+      class="config-tooltip config-slider-tooltip config-zoom-big-fast-appear config-zoom-big-fast-appear-prepare config-zoom-big-fast"
       style="opacity: 0;"
     >
       <div
@@ -25640,7 +25640,7 @@ exports[`ConfigProvider components Slider configProvider componentSize middle 1`
   />
   <div>
     <div
-      class="config-tooltip config-slider-tooltip config-zoom-down-appear config-zoom-down-appear-prepare config-zoom-down"
+      class="config-tooltip config-slider-tooltip config-zoom-big-fast-appear config-zoom-big-fast-appear-prepare config-zoom-big-fast"
       style="opacity: 0;"
     >
       <div
@@ -25691,7 +25691,7 @@ exports[`ConfigProvider components Slider configProvider virtual and dropdownMat
   />
   <div>
     <div
-      class="ant-tooltip ant-slider-tooltip ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
+      class="ant-tooltip ant-slider-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
       style="opacity: 0;"
     >
       <div
@@ -25742,7 +25742,7 @@ exports[`ConfigProvider components Slider normal 1`] = `
   />
   <div>
     <div
-      class="ant-tooltip ant-slider-tooltip ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
+      class="ant-tooltip ant-slider-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
       style="opacity: 0;"
     >
       <div
@@ -25793,7 +25793,7 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
   />
   <div>
     <div
-      class="prefix-Slider-tooltip prefix-Slider-tooltip ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
+      class="prefix-Slider-tooltip prefix-Slider-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
       style="opacity: 0;"
     >
       <div

diff --git a/components/slider/__tests__/__snapshots__/index.test.tsx.snap b/components/slider/__tests__/__snapshots__/index.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`Slider should render in RTL direction 1`] = `
     />
     <div>
       <div
-        class="ant-tooltip ant-slider-tooltip ant-tooltip-rtl ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
+        class="ant-tooltip ant-slider-tooltip ant-tooltip-rtl ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
         style="opacity: 0;"
       >
         <div
@@ -82,7 +82,7 @@ exports[`Slider should render in RTL direction 1`] = `
 
 exports[`Slider should show tooltip when hovering slider handler 1`] = `
 <div
-  class="ant-tooltip ant-slider-tooltip ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
+  class="ant-tooltip ant-slider-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
   style="opacity: 0;"
 >
   <div
@@ -107,7 +107,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
 
 exports[`Slider should show tooltip when hovering slider handler 2`] = `
 <div
-  class="ant-tooltip ant-slider-tooltip ant-zoom-down-leave ant-zoom-down-leave-start ant-zoom-down"
+  class="ant-tooltip ant-slider-tooltip ant-zoom-big-fast-leave ant-zoom-big-fast-leave-start ant-zoom-big-fast"
   style="pointer-events: none;"
 >
   <div

diff --git a/components/slider/index.tsx b/components/slider/index.tsx
@@ -173,7 +173,6 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
     const handleRender: RcSliderProps['handleRender'] = (node, info) => {
       const { index, dragging } = info;
 
-      const rootPrefixCls = getPrefixCls();
       const { tooltip = {}, vertical } = props;
 
       const tooltipProps: SliderTooltipProps = {
@@ -217,7 +216,6 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
           title={mergedTipFormatter ? mergedTipFormatter(info.value) : ''}
           open={open}
           placement={getTooltipPlacement(tooltipPlacement ?? legacyTooltipPlacement, vertical)}
-          transitionName={`${rootPrefixCls}-zoom-down`}
           key={index}
           overlayClassName={`${prefixCls}-tooltip`}
           getPopupContainer={

diff --git a/components/tooltip/style/index.tsx b/components/tooltip/style/index.tsx
@@ -161,11 +161,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         tooltipRadiusOuter: borderRadiusOuter > 4 ? 4 : borderRadiusOuter,
       });
 
-      return [
-        genTooltipStyle(TooltipToken),
-        initZoomMotion(token, 'zoom-big-fast'),
-        initZoomMotion(token, 'zoom-down'),
-      ];
+      return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
     },
     ({ zIndexPopupBase, colorBgSpotlight }) => ({
       zIndexPopup: zIndexPopupBase + 70,