Pārlūkot izejas kodu

弹出层动画完成

robert 1 dienu atpakaļ
vecāks
revīzija
2f76eddb99
2 mainītis faili ar 19 papildinājumiem un 7 dzēšanām
  1. 18 6
      layer.js
  2. 1 1
      xjs.js

+ 18 - 6
layer.js

@@ -218,11 +218,21 @@
       transform-origin: 0 3.75em;
       border-radius: 0 7.5em 7.5em 0;
     }
+    /* Clip ONLY the success tick (do not clip the ring sweep masks) */
+    .${PREFIX}icon .${PREFIX}success-mark {
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      overflow: hidden;
+      z-index: 3;
+      pointer-events: none;
+    }
+
     .${PREFIX}icon .${PREFIX}success-line-tip,
     .${PREFIX}icon .${PREFIX}success-line-long {
       display: block;
       position: absolute;
-      z-index: 2;
+      z-index: 1; /* inside success-mark; keep above its clipping bg */
       height: 0.3125em;
       border-radius: 0.125em;
       background-color: currentColor;
@@ -286,7 +296,7 @@
       }
       65% {
         top: 3.375em;
-        right: 2.875em;x
+        right: 2.875em;
         width: 0;
       }
       84% {
@@ -530,13 +540,14 @@
       if (type === 'success') {
         // SweetAlert2-compatible DOM structure (circle + tick) for exact style parity
         //   <div class="...success-circular-line-left"></div>
-        //   <span class="...success-line-tip"></span>
-        //   <span class="...success-line-long"></span>
+        //   <div class="...success-mark"><span class="...success-line-tip"></span><span class="...success-line-long"></span></div>
         //   <div class="...success-ring"></div>
         //   <div class="...success-fix"></div>
         //   <div class="...success-circular-line-right"></div>
         const left = document.createElement('div');
         left.className = `${PREFIX}success-circular-line-left`;
+        const mark = document.createElement('div');
+        mark.className = `${PREFIX}success-mark`;
         const tip = document.createElement('span');
         tip.className = `${PREFIX}success-line-tip`;
         const long = document.createElement('span');
@@ -548,8 +559,9 @@
         const right = document.createElement('div');
         right.className = `${PREFIX}success-circular-line-right`;
         icon.appendChild(left);
-        icon.appendChild(tip);
-        icon.appendChild(long);
+        mark.appendChild(tip);
+        mark.appendChild(long);
+        icon.appendChild(mark);
         icon.appendChild(ring);
         icon.appendChild(fix);
         icon.appendChild(right);

+ 1 - 1
xjs.js

@@ -189,7 +189,7 @@
       box-sizing: content-box;
       width: 5em;
       height: 5em;
-      margin: 2.5em auto 0.6em;
+      margin: 0.5em auto 1.8em;
       border: 0.25em solid rgba(0, 0, 0, 0);
       border-radius: 50%;
       font-family: inherit;