add scroll animate

src/components/UI/index.vue

@@ -4,6 +4,7 @@
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
+    @click="renderMessage"
   >
     <defs>
       <linearGradient
@@ -40,6 +41,7 @@
       <g
         v-for="(item, index) in renderArr"
         :key="index"
+        :id="index"
         class="test"
         transform="translate(0, 0)"
       >
@@ -83,7 +85,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, onMounted, reactive } from "vue";
+import { defineComponent, ref, inject, onMounted, reactive } from "vue";
 import MessageItem from './UIDetails/messageItem.vue';
 import InputItem from "./UIDetails/inputItem.vue";
 import Messages from "./UIDetails/messages";
@@ -94,30 +96,24 @@ export default defineComponent({
   setup() {
     const renderArr: Message[] = reactive([])
     const messages = Messages;
+    const count = ref(0);
 
     const { beforeEnter, enter, msgOffset } = useUIindexAnims();
 
-    function renderMsg(i: number): void {
-      setTimeout(() => {
-        renderArr.push(messages[i]);
-      }, 2000);
-    }
-
-    function runAnim(): void {
-      for (let i = 0; i < messages.length; i++) {
-        renderMsg(i);
-      }
-    }
-
     // TODO implemeant Undo animation
     function leave() {
 
     }
+    const renderMessage = () => {
+        if (count.value < messages.length) {
+          renderArr.push(messages[count.value])
+          count.value++;
+          return;
+        }
+    }
 
-    onMounted(() => {
-        runAnim();
-    });
     return {
+        renderMessage,
         renderArr,
         msgOffset,
         beforeEnter,