节拍器缩小的动画朝向小窗

src/components/Metronome/MetronomeBox.vue

@@ -46,7 +46,10 @@
     </div>
   </div>
   <NModal
-    :style="dragStyle"
+    :style="{
+      ...dragStyle,
+      '--transformOrigin': transformOrigin
+    }"
     class="metronomeNModal"
     v-model:show="metronomeShow"
     :class="[dragClass, windowMet ? 'transformOrigin' : '']"
@@ -77,7 +80,7 @@
 
 <script setup lang="ts">
 import { NModal } from 'naive-ui';
-import { computed, ref, watch, onMounted, onUnmounted} from 'vue';
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
 import Metronome from './Metronome.vue';
 import { useUserStore } from '@/store/modules/users';
 import useDrag from '@/hooks/useDrag';
@@ -126,9 +129,12 @@ function handleCloseMet() {
   windowMet.value = false;
 }
 function handleWindowMet() {
-  metronomeShow.value = false;
   windowMet.value = true;
   playState.value = metronomeDom.value!.playState;
+  nextTick(() => {
+    computedTransformOrigin();
+    metronomeShow.value = false;
+  });
 }
 function handleSetting() {
   metronomeShow.value = true;
@@ -145,6 +151,22 @@ const metronomeMinConDragData = useDrag(
   windowMet,
   users.info.id
 );
+const transformOrigin = ref('initial');
+function computedTransformOrigin() {
+  const dragDom = document.querySelector(`.${props.dragClass}`) as HTMLElement;
+  const dragRect = dragDom.getBoundingClientRect();
+  const metMinLeft =
+    metronomeMinConDragData.pos.value.left === -1
+      ? 12 //初始化时候窗口的left
+      : metronomeMinConDragData.pos.value.left;
+  const metMinTop =
+    metronomeMinConDragData.pos.value.top === -1
+      ? document.body.clientHeight - 81 - 10 //初始化时候窗口的高
+      : metronomeMinConDragData.pos.value.top;
+  const dragLeft = dragRect.left;
+  const dragTop = dragRect.top;
+  transformOrigin.value = `${metMinLeft - dragLeft}Px ${metMinTop - dragTop}Px`;
+}
 const isDrag = ref(false); // 拖动metronomeMin的时候防止iframe
 function hanldeMetronomeMinmousedown() {
   isDrag.value = true;
@@ -231,7 +253,7 @@ function hanldeMetronomeMinmousedown() {
   position: relative;
   box-shadow: initial;
   &.transformOrigin {
-    transform-origin: 50% 50% !important;
+    transform-origin: var(--transformOrigin) !important;
   }
   .topDragDom {
     position: absolute;