step左右滑动

layer.js

@@ -1312,31 +1312,88 @@
 
       this._updateFlowActions();
 
-      // Switch panes with only content height transition (no slide/fade between steps)
+      // Switch panes with directional slide (next: left, prev: right)
+      const isNext = direction !== 'prev';
+      const enterFrom = isNext ? 100 : -100;
+      const exitTo = isNext ? -100 : 100;
+
+      // Prepare panes for animation
       toPane.style.display = '';
-      toPane.style.position = 'relative';
+      toPane.style.position = 'absolute';
+      toPane.style.left = '0';
+      toPane.style.right = '0';
+      toPane.style.top = '0';
+      toPane.style.transform = `translateX(${enterFrom}%)`;
+      toPane.style.opacity = '0';
+      toPane.style.pointerEvents = 'none';
+
+      fromPane.style.position = 'absolute';
+      fromPane.style.left = '0';
+      fromPane.style.right = '0';
+      fromPane.style.top = '0';
+      fromPane.style.transform = 'translateX(0%)';
+      fromPane.style.opacity = '1';
+      fromPane.style.pointerEvents = 'none';
 
       // Lock content height during transition
       content.style.height = oldH + 'px';
       content.style.overflow = 'hidden';
 
-      // Animate height
+      const slideDuration = 320;
       let heightAnim = null;
+      let fromAnim = null;
+      let toAnim = null;
       try {
         heightAnim = content.animate(
           [{ height: oldH + 'px' }, { height: newH + 'px' }],
           { duration: 220, easing: 'cubic-bezier(0.2, 0.9, 0.2, 1)', fill: 'forwards' }
         );
       } catch {}
+      try {
+        if (fromPane.animate && toPane.animate) {
+          fromAnim = fromPane.animate(
+            [
+              { transform: 'translateX(0%)', opacity: 1 },
+              { transform: `translateX(${exitTo}%)`, opacity: 0.1 }
+            ],
+            { duration: slideDuration, easing: 'cubic-bezier(0.2, 0.9, 0.2, 1)', fill: 'forwards' }
+          );
+          toAnim = toPane.animate(
+            [
+              { transform: `translateX(${enterFrom}%)`, opacity: 0.2 },
+              { transform: 'translateX(0%)', opacity: 1 }
+            ],
+            { duration: slideDuration, easing: 'cubic-bezier(0.2, 0.9, 0.2, 1)', fill: 'forwards' }
+          );
+        }
+      } catch {}
 
       try {
         await Promise.all([
-          heightAnim && heightAnim.finished ? heightAnim.finished.catch(() => {}) : Promise.resolve()
+          heightAnim && heightAnim.finished ? heightAnim.finished.catch(() => {}) : Promise.resolve(),
+          fromAnim && fromAnim.finished ? fromAnim.finished.catch(() => {}) : Promise.resolve(),
+          toAnim && toAnim.finished ? toAnim.finished.catch(() => {}) : Promise.resolve()
         ]);
       } catch {}
 
       // Cleanup styles and hide old pane
       fromPane.style.display = 'none';
+      fromPane.style.position = '';
+      fromPane.style.left = '';
+      fromPane.style.right = '';
+      fromPane.style.top = '';
+      fromPane.style.transform = '';
+      fromPane.style.opacity = '';
+      fromPane.style.pointerEvents = '';
+
+      toPane.style.position = 'relative';
+      toPane.style.left = '';
+      toPane.style.right = '';
+      toPane.style.top = '';
+      toPane.style.transform = '';
+      toPane.style.opacity = '';
+      toPane.style.pointerEvents = '';
+
       content.style.height = '';
       content.style.overflow = '';