From 217510c07d8c917014ea502eb91ce52020565cc0 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Mon, 6 Apr 2026 02:23:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/style.css | 27 +++++++++++++++++++++------
 public/js/app.js     | 39 +++++++++++++++++++++++++++------------
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 079f891..26be891 100644
--- a/public/css/style.css
+++ b/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 */
-    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);
+    box-shadow: 0 0 80px rgba(0, 0, 0, 0.8), 0 0 0 100vh rgba(0, 0, 0, 0.65);
     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);
     }
 }
 
diff --git a/public/js/app.js b/public/js/app.js
index bcc43a5..14cd531 100644
--- a/public/js/app.js
+++ b/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');
-        dom.btnExpandGlobe.classList.toggle('active');
-        if (myMap2D) {
-          // Single deferred resize after the DOM has applied the new layout
-          requestAnimationFrame(() => {
-            myMap2D.resize();
-          });
+        if (dom.globeCard.classList.contains('expanded')) {
+          collapseGlobe();
+        } else {
+          expandGlobe();
         }
       });
     }
@@ -227,11 +246,7 @@
         closeSettings();
         closeLoginModal();
         closeServerDetail();
-        if (dom.globeCard && dom.globeCard.classList.contains('expanded')) {
-          dom.globeCard.classList.remove('expanded');
-          dom.btnExpandGlobe.classList.remove('active');
-          if (myMap2D) requestAnimationFrame(() => myMap2D.resize());
-        }
+        collapseGlobe();
       }
     });