1

src/static/animation_helper.js

@@ -22,6 +22,9 @@ class AnimationHelper {
     // 添加滚动事件监听
     this.addScrollListeners();
     
+    // 监听路由变化
+    this.setupRouteListener();
+    
     // 初始化页面加载动画
     this.initPageLoadAnimations();
     
@@ -61,6 +64,20 @@ class AnimationHelper {
     window.addEventListener('resize', this.handleResize.bind(this), { passive: true });
   }
 
+  /**
+   * 设置路由监听
+   */
+  setupRouteListener() {
+    // 监听 popstate 事件（浏览器前进后退）
+    window.addEventListener('popstate', this.handleRouteChange.bind(this));
+    
+    // 监听自定义路由变化事件
+    window.addEventListener('routeChange', this.handleRouteChange.bind(this));
+    
+    // 监听页面可见性变化
+    document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
+  }
+
   /**
    * 处理滚动事件
    */
@@ -77,6 +94,30 @@ class AnimationHelper {
     this.recalculateAnimations();
   }
 
+  /**
+   * 处理路由变化
+   */
+  handleRouteChange() {
+    // 延迟重置动画，确保DOM已更新
+    setTimeout(() => {
+      this.resetAnimations();
+      this.initPageLoadAnimations();
+    }, 100);
+  }
+
+  /**
+   * 处理页面可见性变化
+   */
+  handleVisibilityChange() {
+    if (!document.hidden) {
+      // 页面重新可见时，重置动画状态
+      setTimeout(() => {
+        this.resetAnimations();
+        this.initPageLoadAnimations();
+      }, 100);
+    }
+  }
+
   /**
    * 初始化页面加载动画
    */
@@ -276,6 +317,41 @@ class AnimationHelper {
     });
   }
 
+  /**
+   * 重置所有动画状态
+   */
+  resetAnimations() {
+    // 重置所有动画元素的类
+    this.animatedElements.forEach(element => {
+      if (element.classList.contains('scroll-animate')) {
+        element.classList.remove('animate-in');
+      } else if (element.classList.contains('animate-stagger')) {
+        element.classList.remove('visible');
+        // 重置子元素状态
+        const children = Array.from(element.children);
+        children.forEach((child, index) => {
+          child.style.opacity = '0';
+          child.style.transform = 'translateY(30px)';
+        });
+      }
+    });
+
+    // 重置所有带有动画类的元素
+    const allAnimatedElements = document.querySelectorAll('.animate-on-scroll, .animate-stagger, .scroll-animate');
+    allAnimatedElements.forEach(element => {
+      element.classList.remove('visible', 'animate-in');
+      
+      // 重置 transform 和 opacity
+      if (element.classList.contains('animate-on-scroll')) {
+        element.style.opacity = '0';
+        element.style.transform = 'translateY(30px)';
+      }
+    });
+
+    // 重新观察所有元素
+    this.recalculateAnimations();
+  }
+
   /**
    * 显示所有元素（降级处理）
    */
@@ -334,6 +410,9 @@ class AnimationHelper {
     
     window.removeEventListener('scroll', this.handleScroll);
     window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener('popstate', this.handleRouteChange);
+    window.removeEventListener('routeChange', this.handleRouteChange);
+    document.removeEventListener('visibilitychange', this.handleVisibilityChange);
     
     this.animatedElements = [];
     this.isInitialized = false;