@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/pc/components/AnimationBox.vue

@@ -1,45 +1,33 @@
-<script lang="ts">
-import { defineComponent, onMounted, onBeforeUnmount, onUnmounted, ref, useAttrs } from 'vue'
-import { animationBoxData, animationEl, animationElClientRect } from '../floating'
-
-export default defineComponent({
-  name: 'AnimationBox',
-  setup() {
-    const mutationObserver = ref<MutationObserver>()
-    const varletLogoAnimationRef = ref<HTMLElement>()
-    animationBoxData.attrs = useAttrs()
-
-    onMounted(() => {
-      animationEl.value = varletLogoAnimationRef.value
-      animationElClientRect.value = varletLogoAnimationRef?.value?.getBoundingClientRect();
-      mutationObserver.value = new MutationObserver(() => {
-        animationElClientRect.value = varletLogoAnimationRef?.value?.getBoundingClientRect();
-      });
-      const logoContainer = varletLogoAnimationRef.value?.parentNode?.parentNode
-      mutationObserver.value.observe(logoContainer || document.body, {
-        attributes: true, 
-        subtree: true, 
-        childList:true 
-      });
-    })
-
-    onBeforeUnmount(() => {
-      mutationObserver.value?.disconnect();
-    })
-
-    onUnmounted(() => {
-      animationEl.value = undefined
-      animationElClientRect.value = undefined
-    })
-
-    return {
-      varletLogoAnimationRef,
-    }
-  },
-})
-</script>
-
-<template>
-  <div ref="varletLogoAnimationRef" data-animation="port"></div>
-</template>
-
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted, ref, useAttrs } from 'vue'
+import { animationBoxData, animationEl, animationElClientRect, isMountedCount } from '../floating'
+
+export default defineComponent({
+  name: 'AnimationBox',
+  setup() {
+    const varletLogoAnimationRef = ref<HTMLElement>()
+    animationBoxData.attrs = useAttrs()
+
+    onMounted(() => {
+      animationEl.value = varletLogoAnimationRef.value
+      animationElClientRect.value = varletLogoAnimationRef?.value?.getBoundingClientRect();
+
+      isMountedCount.value <= 2 && (isMountedCount.value += 1)
+    })
+
+    onUnmounted(() => {
+      animationEl.value = undefined
+      animationElClientRect.value = undefined
+    })
+
+    return {
+      varletLogoAnimationRef,
+    }
+  },
+})
+</script>
+
+<template>
+  <div ref="varletLogoAnimationRef" data-animation="port"></div>
+</template>
+