style(backTop): v-show instead v-if

components/back-top/__tests__/__snapshots__/demo.test.js.snap

@@ -1,9 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/back-top/demo/basic.vue correctly 1`] = `<!----> Scroll down to see the bottom-right <strong style="color: rgba(64, 64, 64, 0.6);">gray</strong> button.`;
+exports[`renders ./components/back-top/demo/basic.vue correctly 1`] = `
+<div class="ant-back-top" style="display: none;">
+  <div class="ant-back-top-content">
+    <div class="ant-back-top-icon"><span role="img" aria-label="vertical-align-top" class="anticon anticon-vertical-align-top"><svg focusable="false" class="" data-icon="vertical-align-top" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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"></path></svg></span></div>
+  </div>
+</div> Scroll down to see the bottom-right <strong style="color: rgba(64, 64, 64, 0.6);">gray</strong> button.
+`;
 
 exports[`renders ./components/back-top/demo/custom.vue correctly 1`] = `
 <div id="components-back-top-demo-custom">
-  <!----> Scroll down to see the bottom-right <strong style="color: rgb(16, 136, 233);">blue</strong> button.
+  <div class="ant-back-top" style="display: none;">
+    <div class="ant-back-top-inner">UP</div>
+  </div> Scroll down to see the bottom-right <strong style="color: rgb(16, 136, 233);">blue</strong> button.
 </div>
 `;

components/back-top/index.tsx

@@ -133,13 +133,14 @@ const BackTop = defineComponent({
         },
       };
 
-      const backTopBtn = state.visible ? (
+      const transitionProps = getTransitionProps('fade');
-        <div {...divProps} ref={domRef}>
+      return (
+        <Transition {...transitionProps}>
+          <div v-show={state.visible} {...divProps} ref={domRef}>
             {slots.default?.() || defaultElement}
           </div>
-      ) : null;
+        </Transition>
-      const transitionProps = getTransitionProps('fade');
+      );
-      return <Transition {...transitionProps}>{backTopBtn}</Transition>;
     };
   },
 });