fix: BackTop should disappear when fade out (#31357)

* fix: BackTop should disappear when fade out

close #31253

* remove default value of removeOnLeave and motionAppear

* fix snapshot
This commit is contained in:
afc163 2021-07-12 19:25:45 +08:00 committed by GitHub
parent 802201913c
commit a145336687
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 132 additions and 151 deletions

View File

@ -91,17 +91,12 @@ const BackTop: React.FC<BackTopProps> = props => {
</div>
);
return (
<CSSMotion visible={visible} motionName={`${rootPrefixCls}-fade`} removeOnLeave>
{({ className: motionClassName }) => {
const childNode = children || defaultElement;
return (
<div>
{cloneElement(childNode, ({ className }) => ({
className: classNames(motionClassName, className),
}))}
</div>
);
}}
<CSSMotion visible={visible} motionName={`${rootPrefixCls}-fade`}>
{({ className: motionClassName }) =>
cloneElement(children || defaultElement, ({ className }) => ({
className: classNames(motionClassName, className),
}))
}
</CSSMotion>
);
};

View File

@ -592,33 +592,31 @@ exports[`ConfigProvider components BackTop configProvider 1`] = `
<div
class="config-back-top"
>
<div>
<div
class="config-back-top-content"
>
<div
class="config-back-top-content"
class="config-back-top-icon"
>
<div
class="config-back-top-icon"
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
>
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
</div>
</div>
@ -628,33 +626,31 @@ exports[`ConfigProvider components BackTop configProvider componentSize large 1`
<div
class="config-back-top"
>
<div>
<div
class="config-back-top-content"
>
<div
class="config-back-top-content"
class="config-back-top-icon"
>
<div
class="config-back-top-icon"
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
>
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
</div>
</div>
@ -664,33 +660,31 @@ exports[`ConfigProvider components BackTop configProvider componentSize middle 1
<div
class="config-back-top"
>
<div>
<div
class="config-back-top-content"
>
<div
class="config-back-top-content"
class="config-back-top-icon"
>
<div
class="config-back-top-icon"
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
>
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
</div>
</div>
@ -700,33 +694,31 @@ exports[`ConfigProvider components BackTop configProvider virtual and dropdownMa
<div
class="ant-back-top"
>
<div>
<div
class="ant-back-top-content"
>
<div
class="ant-back-top-content"
class="ant-back-top-icon"
>
<div
class="ant-back-top-icon"
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
>
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
</div>
</div>
@ -736,33 +728,31 @@ exports[`ConfigProvider components BackTop normal 1`] = `
<div
class="ant-back-top"
>
<div>
<div
class="ant-back-top-content"
>
<div
class="ant-back-top-content"
class="ant-back-top-icon"
>
<div
class="ant-back-top-icon"
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
>
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
</div>
</div>
@ -772,33 +762,31 @@ exports[`ConfigProvider components BackTop prefixCls 1`] = `
<div
class="prefix-BackTop"
>
<div>
<div
class="prefix-BackTop-content"
>
<div
class="prefix-BackTop-content"
class="prefix-BackTop-icon"
>
<div
class="prefix-BackTop-icon"
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
>
<span
aria-label="vertical-align-top"
class="anticon anticon-vertical-align-top"
role="img"
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="vertical-align-top"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
<path
d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
/>
</svg>
</span>
</div>
</div>
</div>

View File

@ -70,8 +70,6 @@ export default function ErrorList({
onLeaveEnd={() => {
onDomErrorVisibleChange?.(false);
}}
motionAppear
removeOnLeave
>
{({ className: motionClassName }: { className?: string }) => (
<div