yindongqi/buliangMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(视图): 为关联关系图添加弹出和收回动画效果

Browse Source 
添加动画状态管理变量 isAnimating，并实现平滑的弹出和收回动画效果
修改关联关系图的显示逻辑，在动画播放期间保持元素可见
添加 CSS 动画关键帧和样式类来处理动画效果
This commit is contained in:
yindongqi 2025-08-08 14:39:42 +08:00
parent 95c0eaa5f0
commit f0548cc2bc
1 changed files with 78 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/views/shanghaiStreetMapDasai.vue
View File

@ -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>