简化与优化加载动画逻辑，新增退出动画关键帧与分阶段动画效果，提升用户交互体验与动画细节表现力。

Author: ForteScarlet

composeApp/src/wasmJsMain/resources/loading.css

@@ -359,6 +359,99 @@
     margin-right: 5px;
 }
 
+/* Simplified Exit Animation Keyframes - Subtle and Elegant */
+@keyframes exitFade {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+}
+
+@keyframes exitSlideUp {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(-30px);
+    }
+}
+
+@keyframes exitSlideDown {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+}
+
+@keyframes exitScale {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+}
+
+
+/* Simplified Exit Animation Classes - Subtle and Elegant */
+.loading-container.exiting {
+    animation: exitFade 0.5s ease-out forwards;
+}
+
+.loader.exiting {
+    animation: exitScale 0.4s ease-out forwards;
+}
+
+.progress-container.exiting {
+    animation: exitSlideDown 0.3s ease-out forwards;
+}
+
+.progress-text.exiting {
+    animation: exitSlideUp 0.3s ease-out forwards;
+}
+
+.code-animation.exiting {
+    animation: exitFade 0.3s ease-out forwards;
+}
+
+.tags.exiting,
+.tag.exiting {
+    animation: exitFade 0.4s ease-out forwards;
+}
+
+.info-text.exiting {
+    animation: exitSlideUp 0.3s ease-out forwards;
+}
+
+.pulse.exiting {
+    animation: exitScale 0.4s ease-out forwards;
+}
+
+.ripple.exiting {
+    animation: exitScale 0.4s ease-out forwards;
+}
+
+.float-particle.exiting,
+.orbit-particle.exiting {
+    animation: exitFade 0.5s ease-out forwards;
+}
+
+.core.exiting {
+    animation: exitScale 0.4s ease-out forwards;
+}
+
 /* Compose App Container */
 #codegen-root {
     width: 100vw;

composeApp/src/wasmJsMain/resources/loading.js

@@ -182,23 +182,70 @@ window.notifyFontLoadingComplete = function() {
         progressText.textContent = '字体加载完成！';
     }
 
-    // Optimized fade-out with better performance
+    // Enhanced exit animation sequence
     if (loadingContainer) {
-        requestAnimationFrame(() => {
-            loadingContainer.style.transition = 'opacity 0.5s ease-out';
-            loadingContainer.style.opacity = '0';
-            
-            setTimeout(() => {
-                loadingContainer.style.display = 'none';
-                loadingContainer.remove();
-                
-                // Clear references for garbage collection
-                window.loadingIntervals = null;
-            }, 500);
-        });
+        performExitAnimation(loadingContainer);
     }
 };
 
+// Enhanced exit animation function with modern tech effects
+function performExitAnimation(loadingContainer) {
+    console.log("Starting enhanced tech-style exit animation");
+    
+    requestAnimationFrame(() => {
+        // Get all animated elements including new tech elements
+        const loader = loadingContainer.querySelector('.loader');
+        const progressContainer = loadingContainer.querySelector('.progress-container');
+        const progressText = loadingContainer.querySelector('.progress-text');
+        const codeAnimation = loadingContainer.querySelector('.code-animation');
+        const tags = loadingContainer.querySelector('.tags');
+        const tagElements = loadingContainer.querySelectorAll('.tag');
+        const infoText = loadingContainer.querySelector('.info-text');
+        const pulse = loadingContainer.querySelector('.pulse');
+        const core = loadingContainer.querySelector('.core');
+        const ripples = loadingContainer.querySelectorAll('.ripple');
+        const orbitParticles = loadingContainer.querySelectorAll('.orbit-particle');
+        const particles = loadingContainer.querySelectorAll('.float-particle');
+        
+        // Simple staggered exit animations - elegant and restrained
+        setTimeout(() => {
+            // Stage 1: Core elements (100ms delay)
+            if (core) core.classList.add('exiting');
+            if (pulse) pulse.classList.add('exiting');
+            ripples.forEach(ripple => ripple.classList.add('exiting'));
+            if (loader) loader.classList.add('exiting');
+        }, 100);
+        
+        setTimeout(() => {
+            // Stage 2: UI elements (200ms total delay)
+            if (progressContainer) progressContainer.classList.add('exiting');
+            if (progressText) progressText.classList.add('exiting');
+            if (codeAnimation) codeAnimation.classList.add('exiting');
+            if (tags) tags.classList.add('exiting');
+            tagElements.forEach(tag => tag.classList.add('exiting'));
+            if (infoText) infoText.classList.add('exiting');
+        }, 200);
+        
+        setTimeout(() => {
+            // Stage 3: Particles and final container (400ms total delay)
+            particles.forEach(particle => particle.classList.add('exiting'));
+            orbitParticles.forEach(particle => particle.classList.add('exiting'));
+            loadingContainer.classList.add('exiting');
+        }, 400);
+        
+        // Clean and efficient cleanup
+        setTimeout(() => {
+            loadingContainer.style.display = 'none';
+            loadingContainer.remove();
+            
+            // Clear references for garbage collection
+            window.loadingIntervals = null;
+            
+            console.log("Loading animation completed - subtle and elegant");
+        }, 800); // Reduced duration: 800ms
+    });
+}
+
 // Initialize when DOM is ready
 if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', initializeLoadingScreen);