修复动画错误问题

public/css/style.css

@@ -2005,6 +2005,10 @@ input:checked+.slider:before {
     opacity: 1 !important;
 }
 
+.globe-card.globe-collapsing {
+    pointer-events: none;
+}
+
 .globe-card.expanded .globe-body {
     height: calc(90vh - 120px) !important; /* Explicit calc height for ECharts reliability */
     width: 100% !important;

public/js/app.js

@@ -213,18 +213,22 @@
     function expandGlobe() {
       if (dom.globeCard.classList.contains('expanded')) return;
 
-      // FLIP Step 1 — First: save original rect
+      // Save original rect for FLIP
       savedGlobeRect = dom.globeCard.getBoundingClientRect();
 
-      // FLIP Step 2 — Last: apply expanded state
       dom.globeCard.classList.add('expanded');
       dom.btnExpandGlobe.classList.add('active');
+      
+      // Update button icon/title
+      dom.btnExpandGlobe.title = '缩小显示';
+      dom.btnExpandGlobe.innerHTML = `
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px;">
+          <path d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7" />
+        </svg>
+      `;
 
-      // Resize ECharts IMMEDIATELY so the map renders at full size
-      // This prevents the "flash" — content is correctly sized throughout
       if (myMap2D) myMap2D.resize();
 
-      // FLIP Step 3 — Invert: calculate and apply inverse transform
       const endRect = dom.globeCard.getBoundingClientRect();
       const scaleX = savedGlobeRect.width / endRect.width;
       const scaleY = savedGlobeRect.height / endRect.height;
@@ -236,36 +240,51 @@
       dom.globeCard.style.transform = `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`;
       dom.globeCard.style.boxShadow = '0 0 0 0 transparent, 0 0 0 0 transparent';
 
-      // Force reflow to commit the inverse state
+      dom.globeCard.offsetHeight; // Force reflow
-      dom.globeCard.offsetHeight;
 
-      // FLIP Step 4 — Play: animate to final state
       dom.globeCard.style.transition = 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease';
       dom.globeCard.style.transform = '';
       dom.globeCard.style.boxShadow = '';
 
-      dom.globeCard.addEventListener('transitionend', function onEnd(e) {
+      const onTransitionEnd = (e) => {
         if (e.propertyName !== 'transform') return;
-        dom.globeCard.removeEventListener('transitionend', onEnd);
+        dom.globeCard.removeEventListener('transitionend', onTransitionEnd);
         dom.globeCard.style.transition = '';
         dom.globeCard.style.willChange = '';
-      });
+      };
+      dom.globeCard.addEventListener('transitionend', onTransitionEnd);
     }
 
     function collapseGlobe() {
       if (!dom.globeCard.classList.contains('expanded')) return;
       if (dom.globeCard.classList.contains('globe-collapsing')) return;
 
-      if (!savedGlobeRect) {
+      const resetState = () => {
-        dom.globeCard.classList.remove('expanded');
+        dom.globeCard.classList.remove('expanded', 'globe-collapsing');
         dom.btnExpandGlobe.classList.remove('active');
+        dom.globeCard.style.transition = '';
+        dom.globeCard.style.transform = '';
+        dom.globeCard.style.boxShadow = '';
+        dom.globeCard.style.willChange = '';
+        
+        // Restore button icon/title
+        dom.btnExpandGlobe.title = '放大显示';
+        dom.btnExpandGlobe.innerHTML = `
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px;">
+            <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
+          </svg>
+        `;
+
         if (myMap2D) requestAnimationFrame(() => myMap2D.resize());
+      };
+
+      if (!savedGlobeRect) {
+        resetState();
         return;
       }
 
       dom.globeCard.classList.add('globe-collapsing');
 
-      // Calculate transform from expanded back to original position
       const expandedRect = dom.globeCard.getBoundingClientRect();
       const scaleX = savedGlobeRect.width / expandedRect.width;
       const scaleY = savedGlobeRect.height / expandedRect.height;
@@ -274,20 +293,29 @@
 
       dom.globeCard.style.willChange = 'transform, box-shadow';
       dom.globeCard.style.transition = 'transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease';
-      dom.globeCard.style.transform = `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`;
+      
-      dom.globeCard.style.boxShadow = '0 0 0 0 transparent, 0 0 0 0 transparent';
+      // Force change to ensure transition fires
-
+      requestAnimationFrame(() => {
-      dom.globeCard.addEventListener('transitionend', function onEnd(e) {
+        dom.globeCard.style.transform = `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`;
-        if (e.propertyName !== 'transform') return;
+        dom.globeCard.style.boxShadow = '0 0 0 0 transparent, 0 0 0 0 transparent';
-        dom.globeCard.removeEventListener('transitionend', onEnd);
-        dom.globeCard.classList.remove('expanded', 'globe-collapsing');
-        dom.btnExpandGlobe.classList.remove('active');
-        dom.globeCard.style.transition = '';
-        dom.globeCard.style.transform = '';
-        dom.globeCard.style.boxShadow = '';
-        dom.globeCard.style.willChange = '';
-        if (myMap2D) requestAnimationFrame(() => myMap2D.resize());
       });
+
+      let transitionFinished = false;
+      const onTransitionEnd = (e) => {
+        if (e.propertyName !== 'transform') return;
+        transitionFinished = true;
+        dom.globeCard.removeEventListener('transitionend', onTransitionEnd);
+        resetState();
+      };
+      dom.globeCard.addEventListener('transitionend', onTransitionEnd);
+
+      // Robustness fallback (400ms > 350ms transition)
+      setTimeout(() => {
+        if (!transitionFinished) {
+          dom.globeCard.removeEventListener('transitionend', onTransitionEnd);
+          resetState();
+        }
+      }, 500);
     }
 
     if (dom.btnExpandGlobe) {