优化动画

public/css/style.css

@@ -1992,14 +1992,18 @@ input:checked+.slider:before {
     width: 95vw !important;
     height: 90vh !important;
     z-index: 9999;
-    transform: none !important; /* Remove translate to avoid coordinate issues */
+    box-shadow: 0 0 80px rgba(0, 0, 0, 0.8), 0 0 0 100vh rgba(0, 0, 0, 0.65);
-    transition: none !important; /* Avoid transition conflicts during state jump */
-    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9), 0 0 0 100vh rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(20px);
     margin: 0 !important;
     display: flex !important;
     flex-direction: column;
     border-color: var(--accent-indigo);
+    animation: globeExpandIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Collapse animation (plays while .expanded is still active to keep fixed positioning) */
+.globe-card.expanded.globe-collapsing {
+    animation: globeCollapseOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
 /* Ensure children are visible */
@@ -2007,14 +2011,25 @@ input:checked+.slider:before {
     opacity: 1 !important;
 }
 
-@keyframes globeExpand {
+@keyframes globeExpandIn {
     from {
         opacity: 0;
-        transform: translate(-50%, -45%) scale(0.95);
+        transform: scale(0.82);
     }
     to {
         opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
+        transform: scale(1);
+    }
+}
+
+@keyframes globeCollapseOut {
+    from {
+        opacity: 1;
+        transform: scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.82);
     }
 }
 

public/js/app.js

@@ -208,15 +208,34 @@
     }
 
     // Globe expansion
+    function expandGlobe() {
+      if (dom.globeCard.classList.contains('expanded')) return;
+      dom.globeCard.classList.add('expanded');
+      dom.btnExpandGlobe.classList.add('active');
+      dom.globeCard.addEventListener('animationend', function onExpand() {
+        dom.globeCard.removeEventListener('animationend', onExpand);
+        if (myMap2D) myMap2D.resize();
+      });
+    }
+
+    function collapseGlobe() {
+      if (!dom.globeCard.classList.contains('expanded')) return;
+      if (dom.globeCard.classList.contains('globe-collapsing')) return;
+      dom.globeCard.classList.add('globe-collapsing');
+      dom.globeCard.addEventListener('animationend', function onCollapse() {
+        dom.globeCard.removeEventListener('animationend', onCollapse);
+        dom.globeCard.classList.remove('expanded', 'globe-collapsing');
+        dom.btnExpandGlobe.classList.remove('active');
+        if (myMap2D) requestAnimationFrame(() => myMap2D.resize());
+      });
+    }
+
     if (dom.btnExpandGlobe) {
       dom.btnExpandGlobe.addEventListener('click', () => {
-        dom.globeCard.classList.toggle('expanded');
+        if (dom.globeCard.classList.contains('expanded')) {
-        dom.btnExpandGlobe.classList.toggle('active');
+          collapseGlobe();
-        if (myMap2D) {
+        } else {
-          // Single deferred resize after the DOM has applied the new layout
+          expandGlobe();
-          requestAnimationFrame(() => {
-            myMap2D.resize();
-          });
         }
       });
     }
@@ -227,11 +246,7 @@
         closeSettings();
         closeLoginModal();
         closeServerDetail();
-        if (dom.globeCard && dom.globeCard.classList.contains('expanded')) {
+        collapseGlobe();
-          dom.globeCard.classList.remove('expanded');
-          dom.btnExpandGlobe.classList.remove('active');
-          if (myMap2D) requestAnimationFrame(() => myMap2D.resize());
-        }
       }
     });