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

* fix: use native tooltip

* chore: clean up

* test: Update snapshot

* test: Update snapshot
This commit is contained in:
二货爱吃白萝卜 2022-12-28 00:01:45 +08:00 committed by yoyo837
parent d2d37bda21
commit 6246647b50
4 changed files with 11 additions and 17 deletions

View File

@ -25459,7 +25459,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
@ -25510,7 +25510,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
@ -25561,7 +25561,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
@ -25612,7 +25612,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
@ -25663,7 +25663,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
@ -25714,7 +25714,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
@ -25765,7 +25765,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

View File

@ -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

View File

@ -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={

View File

@ -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,