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 @@ + :resizable="resizableBoolean" v-show="!relationShow && !isAnimating">
@@ -338,8 +338,15 @@
+ 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;">
@@ -369,7 +376,7 @@ @@ -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; +}