add allCardHeight function

src/components/UI/index.vue

@@ -40,6 +40,7 @@
       <g
         v-for="(item, index) in renderArr"
         :key="index"
+        class="message"
         id="cards"
         transform="translate(0, 0)"
       >

src/composables/anims/useUIindexAnims.ts

@@ -1,5 +1,6 @@
 import { inject, onMounted } from "vue";
 export default function useUIindexAnims() {
+  interface Done {}
   const anime: any = inject("animejs");
   const timeline = anime.timeline({ loop: true });
   const msgOffset = {
@@ -18,12 +19,31 @@ export default function useUIindexAnims() {
     winW = messenger.clientWidth;
   });
 
-  async function beforeEnter(el: any) {
+  function getCardHeight(el: SVGSVGElement) {
+    const cardHeight = el.getBBox().height;
+    return cardHeight;
+  }
+
+  async function getAllCardsHeight() {
+    let cards: [];
+    cardsDiv = await document.getElementById("cardsDiv");
+    cards = cardsDiv.querySelectorAll(".message");
+    let totalHeight = 0;
+    for (const card of cards) {
+      let height = getCardHeight(card);
+      totalHeight += height;
+      if (totalHeight >= 500) {
+        console.log("update scroll view");
+      }
+    }
+  }
+
+  async function beforeEnter(el: SVGGElement) {
     modifier = el.className.baseVal.substring(0, 2);
   }
 
   async function enter(el: SVGGElement, done: any) {
-    console.log(done);
+    getAllCardsHeight();
     const paddingLeft = 40;
     msg = await document.getElementById(el.id);
     const rect = msg.getBoundingClientRect();
@@ -69,6 +89,7 @@ export default function useUIindexAnims() {
         duration: 500,
         offset: 1000
       });
+    done;
   }
   return {
     beforeEnter,