fix(base-loading): no icon switch transition style...

tusen-ai · Dec 27, 2023 · 6dce58f · 6dce58f
1 parent 36dc01b
commit 6dce58f
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 46 deletions.
diff --git a/src/_internal/loading/src/Loading.tsx b/src/_internal/loading/src/Loading.tsx
@@ -54,57 +54,62 @@ export default defineComponent({
           {{
             default: () =>
               this.show ? (
-                <div class={`${clsPrefix}-base-loading__container`}>
-                  <svg
-                    class={`${clsPrefix}-base-loading__icon`}
-                    viewBox={`0 0 ${2 * scaledRadius} ${2 * scaledRadius}`}
-                    xmlns="http://www.w3.org/2000/svg"
-                    style={{ color: stroke }}
-                  >
-                    <g>
-                      <animateTransform
-                        attributeName="transform"
-                        type="rotate"
-                        values={`0 ${scaledRadius} ${scaledRadius};270 ${scaledRadius} ${scaledRadius}`}
-                        begin="0s"
-                        dur={duration}
-                        fill="freeze"
-                        repeatCount="indefinite"
-                      />
-                      <circle
-                        class={`${clsPrefix}-base-loading__icon`}
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width={strokeWidth}
-                        stroke-linecap="round"
-                        cx={scaledRadius}
-                        cy={scaledRadius}
-                        r={radius - strokeWidth / 2}
-                        stroke-dasharray={5.67 * radius}
-                        stroke-dashoffset={18.48 * radius}
-                      >
+                <div
+                  key="icon"
+                  class={`${clsPrefix}-base-loading__transition-wrapper`}
+                >
+                  <div class={`${clsPrefix}-base-loading__container`}>
+                    <svg
+                      class={`${clsPrefix}-base-loading__icon`}
+                      viewBox={`0 0 ${2 * scaledRadius} ${2 * scaledRadius}`}
+                      xmlns="http://www.w3.org/2000/svg"
+                      style={{ color: stroke }}
+                    >
+                      <g>
                         <animateTransform
                           attributeName="transform"
                           type="rotate"
-                          values={`0 ${scaledRadius} ${scaledRadius};135 ${scaledRadius} ${scaledRadius};450 ${scaledRadius} ${scaledRadius}`}
-                          begin="0s"
-                          dur={duration}
-                          fill="freeze"
-                          repeatCount="indefinite"
-                        />
-                        <animate
-                          attributeName="stroke-dashoffset"
-                          values={`${5.67 * radius};${1.42 * radius};${
-                            5.67 * radius
-                          }`}
+                          values={`0 ${scaledRadius} ${scaledRadius};270 ${scaledRadius} ${scaledRadius}`}
                           begin="0s"
                           dur={duration}
                           fill="freeze"
                           repeatCount="indefinite"
                         />
-                      </circle>
-                    </g>
-                  </svg>
+                        <circle
+                          class={`${clsPrefix}-base-loading__icon`}
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width={strokeWidth}
+                          stroke-linecap="round"
+                          cx={scaledRadius}
+                          cy={scaledRadius}
+                          r={radius - strokeWidth / 2}
+                          stroke-dasharray={5.67 * radius}
+                          stroke-dashoffset={18.48 * radius}
+                        >
+                          <animateTransform
+                            attributeName="transform"
+                            type="rotate"
+                            values={`0 ${scaledRadius} ${scaledRadius};135 ${scaledRadius} ${scaledRadius};450 ${scaledRadius} ${scaledRadius}`}
+                            begin="0s"
+                            dur={duration}
+                            fill="freeze"
+                            repeatCount="indefinite"
+                          />
+                          <animate
+                            attributeName="stroke-dashoffset"
+                            values={`${5.67 * radius};${1.42 * radius};${
+                              5.67 * radius
+                            }`}
+                            begin="0s"
+                            dur={duration}
+                            fill="freeze"
+                            repeatCount="indefinite"
+                          />
+                        </circle>
+                      </g>
+                    </svg>
+                  </div>
                 </div>
               ) : (
                 <div

diff --git a/src/_internal/loading/src/styles/index.cssr.ts b/src/_internal/loading/src/styles/index.cssr.ts
@@ -1,5 +1,6 @@
 import { c, cB, cE } from '../../../../_utils/cssr'
 import { iconSwitchTransition } from '../../../../_styles/transitions/icon-switch.cssr'
+
 export default c([
   c('@keyframes rotator', `
     0% {
@@ -17,6 +18,13 @@ export default c([
     width: 1em;
     height: 1em;
   `, [
+    cE('transition-wrapper', `
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    `, [
+      iconSwitchTransition()
+    ]),
     cE('placeholder', `
       position: absolute;
       left: 50%;
@@ -35,9 +43,7 @@ export default c([
       cE('icon', `
         height: 1em;
         width: 1em;
-      `, [
-        iconSwitchTransition()
-      ])
+      `)
     ])
   ])
 ])