Przeglądaj źródła

feat(动画效果): 添加水资模块卡片入场动画并修复页面切换逻辑

为水资模块的左右列卡片添加从两侧滑入的动画效果
修复handleSwitchToRegionOverview函数错误切换到区域总览的问题,改为正确切换到融合体系页面
BAI 2 tygodni temu
rodzic
commit
5b3e532b5d
2 zmienionych plików z 15 dodań i 4 usunięć
  1. 11 4
      src/views/map/index.vue
  2. 4 0
      src/views/waterResource/index.vue

+ 11 - 4
src/views/map/index.vue

@@ -358,10 +358,16 @@ function handleMapModeChanged(mode) {
   state.currentMapMode = mode
 }
 
-// 处理切换到区域总览页面
+// 处理切换到融合体系页面
 function handleSwitchToRegionOverview() {
-  // 切换到区域总览页面(activeIndex 为 1)
-  state.activeIndex = '1'
+  // 切换到融合体系页面(activeIndex 为 2)
+  state.activeIndex = '2'
+  
+  // 触发动画
+  nextTick(() => {
+    gsap.to(".water-resource-content .left-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+    gsap.to(".water-resource-content .right-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+  })
 }
 
 // 切换到苏州地图
@@ -490,7 +496,8 @@ function handleMenuSelect(index) {
       gsap.to(".bottom-tray", { y: 0, opacity: 1, duration: 0.5 })
       gsap.to(".bottom-radar", { y: 0, opacity: 1, duration: 0.5 })
     } else if (index === "2") {
-      gsap.to(".water-resource-content .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+      gsap.to(".water-resource-content .left-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+      gsap.to(".water-resource-content .right-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
     } else if (index === "3") {
       // 综合业务页面的动画效果由其自身处理
     } else if (index === "4") {

+ 4 - 0
src/views/waterResource/index.vue

@@ -69,6 +69,8 @@ import CenterIntroduction from "./components/CenterIntroduction.vue"
     border: 1px solid rgba(48, 220, 255, 0.3);
     border-radius: 10px;
     box-shadow: 0 0 20px rgba(48, 220, 255, 0.1);
+    transform: translateX(-150%);
+    opacity: 0;
     &:first-child {
       height: 550px;
       margin-top: -50px;
@@ -103,6 +105,8 @@ import CenterIntroduction from "./components/CenterIntroduction.vue"
     border: 1px solid rgba(48, 220, 255, 0.3);
     border-radius: 10px;
     box-shadow: 0 0 20px rgba(48, 220, 255, 0.1);
+    transform: translateX(150%);
+    opacity: 0;
     &:first-child {
       margin-top: -30px;
     }