入场动画

Guide.md

@@ -265,6 +265,7 @@ go run main.go build path/to/xjs.js
 - **直接触发**：`Layer.run(options)` / `Layer(options)`
 - **链式构建**：`Layer.$(baseOptions).step(...).run()`
 - **快捷 steps**：`Layer.flow(steps, baseOptions)`
+- **注意**：`fire` 相关别名已移除，统一使用 `run`
 
 示例（最简弹窗）：
 

doc/layer/test_custom_animation.html

@@ -77,10 +77,11 @@
           <button class="btn" type="button" onclick="openDemo('loadding')">Loading</button>
           <button class="btn" type="button" onclick="openDemo('banner')">Banner</button>
           <button class="btn" type="button" onclick="openDemo('BallSorting')">BallSorting</button>
+          <button class="btn" type="button" onclick="openDemo('BallSorting', false)">Scale Pop</button>
           <button class="btn disabled" type="button" disabled>更多动画待加入...</button>
         </div>
         <div class="hint">
-          Tip: 将 Lottie JSON 放在 <code class="inline">/svg</code> 目录，按钮参数填 <code class="inline">svg:&lt;json文件名&gt;</code>。
+          Tip: 关闭 <code class="inline">popupAnimation</code> 可查看当前位置的缩放回弹效果。
         </div>
       </div>
 
@@ -93,11 +94,13 @@
         </div>
       </div>
 
-      <pre id="js-code" class="code-view active">function openDemo(name) {
+      <pre id="js-code" class="code-view active">function openDemo(name, popupOverride) {
   if (typeof window.$ !== 'function') return;
 
   const iconAnimation = !!document.getElementById('optIcon')?.checked;
-  const popupAnimation = !!document.getElementById('optPopup')?.checked;
+  const popupAnimation = (typeof popupOverride === 'boolean')
+    ? popupOverride
+    : !!document.getElementById('optPopup')?.checked;
   const closeOnEsc = !!document.getElementById('optEsc')?.checked;
   const iconBox = name === 'loadding' ? '11em' : null;
 
@@ -125,10 +128,11 @@
   &lt;button class="btn" type="button" onclick="openDemo('loadding')"&gt;Loading&lt;/button&gt;
   &lt;button class="btn" type="button" onclick="openDemo('banner')"&gt;Banner&lt;/button&gt;
   &lt;button class="btn" type="button" onclick="openDemo('BallSorting')"&gt;BallSorting&lt;/button&gt;
+  &lt;button class="btn" type="button" onclick="openDemo('BallSorting', false)"&gt;Scale Pop&lt;/button&gt;
   &lt;button class="btn disabled" type="button" disabled&gt;更多动画待加入...&lt;/button&gt;
   &lt;/div&gt;
   &lt;div class="hint"&gt;
-    Tip: 将 Lottie JSON 放在 &lt;code class="inline"&gt;/svg&lt;/code&gt; 目录，按钮参数填 &lt;code class="inline"&gt;svg:&amp;lt;json文件名&amp;gt;&lt;/code&gt;。
+    Tip: 关闭 &lt;code class="inline"&gt;popupAnimation&lt;/code&gt; 可查看当前位置的缩放回弹效果。
   &lt;/div&gt;
 &lt;/div&gt;</pre>
 
@@ -223,11 +227,13 @@
       }
     }
 
-    function openDemo(name) {
+    function openDemo(name, popupOverride) {
       if (typeof window.$ !== 'function') return;
 
       const iconAnimation = !!document.getElementById('optIcon')?.checked;
-      const popupAnimation = !!document.getElementById('optPopup')?.checked;
+      const popupAnimation = (typeof popupOverride === 'boolean')
+        ? popupOverride
+        : !!document.getElementById('optPopup')?.checked;
       const closeOnEsc = !!document.getElementById('optEsc')?.checked;
 
       const titleCap = name ? (name[0].toUpperCase() + name.slice(1)) : '';

layer.js

@@ -1256,7 +1256,7 @@
                   { transform: 'translateY(0px) scale(1)', opacity: 1 }
                 ],
                 {
-                  duration: 520,
+                  duration: 220,
                   easing: 'cubic-bezier(0.2, 0.9, 0.2, 1)',
                   fill: 'forwards'
                 }
@@ -1276,17 +1276,78 @@
                   y: [y0, 0],
                   scale: [0.92, 1],
                   opacity: [0, 1],
-                  duration: 520,
+                  duration: 220,
                   easing: 'ease-out'
                 });
               }
               setTimeout(() => {
                 try { popup.style.willChange = ''; } catch {}
-              }, 560);
+              }, 260);
             }
           } catch {}
         }
       }
+      // When popupAnimation is disabled, use a subtle scale-pop fade-in at current position.
+      if (!this.params.popupAnimation && !this._isReplace && this.dom.popup) {
+        try {
+          const popup = this.dom.popup;
+          popup.style.transition = 'none';
+          popup.style.willChange = 'transform, opacity';
+            if (popup.animate) {
+            const anim = popup.animate(
+              [
+                  { transform: 'scale(0.8)', opacity: 0, offset: 0, easing: 'ease-out' },
+                  { transform: 'scale(1.1)', opacity: 1, offset: 0.67, easing: 'ease-in-out' },
+                  { transform: 'scale(1)', opacity: 1, offset: 1 }
+              ],
+              {
+                  duration: 240,
+                  fill: 'forwards'
+              }
+            );
+            anim.finished
+              .catch(() => {})
+              .finally(() => {
+                try { popup.style.willChange = ''; } catch {}
+                try { popup.style.transition = ''; } catch {}
+                try { popup.style.opacity = ''; } catch {}
+                try { popup.style.transform = ''; } catch {}
+              });
+          } else {
+            const X = Layer._getXjs();
+            if (X) {
+              popup.style.opacity = '0';
+              popup.style.transform = 'scale(0.8)';
+              X(popup).animate({
+                scale: [0.8, 1.1],
+                opacity: [0, 1],
+                duration: 160,
+                easing: 'ease-out'
+              });
+              setTimeout(() => {
+                try {
+                  X(popup).animate({
+                    scale: [1.1, 1],
+                    duration: 80,
+                    easing: 'ease-in-out'
+                  });
+                } catch {}
+              }, 160);
+              setTimeout(() => {
+                try { popup.style.willChange = ''; } catch {}
+                try { popup.style.transition = ''; } catch {}
+                try { popup.style.opacity = ''; } catch {}
+                try { popup.style.transform = ''; } catch {}
+              }, 270);
+            } else {
+              setTimeout(() => {
+                try { popup.style.willChange = ''; } catch {}
+                try { popup.style.transition = ''; } catch {}
+              }, 260);
+            }
+          }
+        } catch {}
+      }
       // Replace mode: if popupAnimation is off, do a soft fade+scale to avoid a hard cut.
       if (!this.params.popupAnimation && this._isReplace && this.dom.popup) {
         try {