From f0548cc2bc4438e10a3eefb0911253072c91e491 Mon Sep 17 00:00:00 2001
From: yindongqi <yin_dongqi@163.com>
Date: Fri, 8 Aug 2025 14:39:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E4=B8=BA=E5=85=B3?=
 =?UTF-8?q?=E8=81=94=E5=85=B3=E7=B3=BB=E5=9B=BE=E6=B7=BB=E5=8A=A0=E5=BC=B9?=
 =?UTF-8?q?=E5=87=BA=E5=92=8C=E6=94=B6=E5=9B=9E=E5=8A=A8=E7=94=BB=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加动画状态管理变量 isAnimating，并实现平滑的弹出和收回动画效果
修改关联关系图的显示逻辑，在动画播放期间保持元素可见
添加 CSS 动画关键帧和样式类来处理动画效果
---
 src/views/shanghaiStreetMapDasai.vue | 84 ++++++++++++++++++++++++++--
 1 file changed, 78 insertions(+), 6 deletions(-)

diff --git a/src/views/shanghaiStreetMapDasai.vue b/src/views/shanghaiStreetMapDasai.vue
index e5dc4cb..f9c8909 100644
--- a/src/views/shanghaiStreetMapDasai.vue
+++ b/src/views/shanghaiStreetMapDasai.vue
@@ -323,7 +323,7 @@
     </vue-draggable-resizable>
     <!-- 右3 -->
     <vue-draggable-resizable ref="refWoTe6" style="border: none; z-index: 999" :draggable="draggableBoolean"
-      :resizable="resizableBoolean" v-show="!relationShow">
+      :resizable="resizableBoolean" v-show="!relationShow && !isAnimating">
       <div
         class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500 overflow-hidden"
         ref="main6">
@@ -338,8 +338,15 @@
       <span ref="ripple" class="ripple"></span>
     </div>
     <div
-      class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500 overflow-hidden z-[999]"
-      ref="main9" v-show="relationShow">
+      class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500 overflow-hidden z-[999] fixed bottom-10 right-7"
+      ref="main9" 
+      :class="{
+        'animate-popup': isAnimating && relationShow,
+        'animate-shrink': isAnimating && !relationShow,
+        'opacity-0 scale-0': !relationShow && !isAnimating
+      }"
+      v-show="relationShow || isAnimating"
+      style="transform-origin: bottom right;">
 
     </div>
 
@@ -369,7 +376,7 @@
 <script setup lang="ts">
 import VueDraggableResizable from "vue-draggable-resizable/src/components/vue-draggable-resizable.vue";
 import "vue-draggable-resizable/dist/VueDraggableResizable.css";
-import { onMounted, reactive, ref, watch, onBeforeUnmount } from "vue";
+import { onMounted, reactive, ref, watch, onBeforeUnmount, nextTick } from "vue";
 import BarShow from "../components/barshow.vue";
 import shangHaiJieDao from "../mapjson/shangHaiJieDao.json";
 import shangHaiXiaQu from "../mapjson/shanghaiXiaQu.json";
@@ -1408,6 +1415,7 @@ let main8 = ref();
 let main9 = ref();
 
 const relationShow = ref(false);
+const isAnimating = ref(false);
 
 let swiperRef = ref();
 let timeline = ref();
@@ -3994,7 +4002,8 @@ const choujianEchartsPinfa = () => {
     },
     tooltip: {
       trigger: "axis",
-      valueFormatter: (v) => (v == null ? "无" : v + "%"),
+      // valueFormatter: (v) => (v == null ? "无" : v + "%"),
+      valueFormatter: (v) => (v == null ? choujianPinfaData.value[0].prediction + "%" : v + "%"),
     },
     legend: {
       data: legendData,
@@ -4214,9 +4223,23 @@ const handleFancyClick = (e: MouseEvent) => {
   setTimeout(() => span.classList.remove('show'), 500)
 
   //接下来展示或隐藏关联关系图
-  relationShow.value = !relationShow.value;
   if (relationShow.value) {
+    // 隐藏动画：先播放收回动画，动画完成后再隐藏
+    isAnimating.value = true
+    relationShow.value = false
+    setTimeout(() => {
+      isAnimating.value = false
+    }, 300) // 动画持续时间
   } else {
+    // 显示动画：先显示元素（但不可见），然后播放弹出动画
+    relationShow.value = true
+    // 延迟一帧再开始动画，确保元素已经渲染
+    requestAnimationFrame(() => {
+      isAnimating.value = true
+      setTimeout(() => {
+        isAnimating.value = false
+      }, 300) // 动画持续时间
+    })
   }
 }
 </script>
@@ -4372,4 +4395,53 @@ const handleFancyClick = (e: MouseEvent) => {
   opacity: 1;
   transition: transform 0.5s, opacity 0.5s;
 }
+
+/* 弹出动画 */
+@keyframes popup {
+  0% {
+    opacity: 0;
+    transform: scale(0) translate(0, 0);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(0.8) translate(0, -20px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translate(0, 0);
+  }
+}
+
+/* 收回动画 */
+@keyframes shrink {
+  0% {
+    opacity: 1;
+    transform: scale(1) translate(0, 0);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(0.8) translate(0, -20px);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0) translate(0, 0);
+  }
+}
+
+.animate-popup {
+  animation: popup 0.3s ease-out forwards;
+  transform-origin: bottom right;
+}
+
+.animate-shrink {
+  animation: shrink 0.3s ease-in forwards;
+  transform-origin: bottom right;
+}
+
+/* 初始状态 - 隐藏且缩放为0 */
+.opacity-0.scale-0 {
+  opacity: 0 !important;
+  transform: scale(0) !important;
+  transition: none !important;
+}
 </style>