From 70ad9f62f60339d338f00d45e859a20c81b012d9 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Wed, 24 May 2023 15:07:26 +0800
Subject: [PATCH] head line animate

---
 src/components/HeadLine.vue | 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/HeadLine.vue b/src/components/HeadLine.vue
index 93fc001..0e5cb51 100644
--- a/src/components/HeadLine.vue
+++ b/src/components/HeadLine.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="header_line_container" ref="el">
     <h2 class="title" ref="titleRef">{{ title }}</h2>
-    <p class="line"></p>
-    <p class="desc" v-if="line1">
+    <p class="line" ref="lineRef"></p>
+    <p class="desc" v-if="line1" ref="descRef1">
       {{ line1 }}
     </p>
-    <p class="desc" v-if="line2">
+    <p class="desc" v-if="line2" ref="descRef2">
       {{ line2 }}
     </p>
   </div>
@@ -15,6 +15,9 @@
 import { ref, onMounted } from 'vue'
 const el = ref(null)
 const titleRef = ref(null)
+const lineRef = ref(null)
+const descRef1 = ref(null)
+const descRef2 = ref(null)
 const props = defineProps({
   title: {
     type: String,
@@ -30,28 +33,29 @@ onMounted(() => {
   const observer = new IntersectionObserver(entries => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
-        animateCSS('bounce')
+        animateCSS(titleRef.value, 'fadeInUp')
+        animateCSS(lineRef.value, 'fadeInUp')
+        animateCSS(descRef1.value, 'fadeInUp')
+        animateCSS(descRef2.value, 'fadeInUp')
       }
     })
   })
   observer.observe(el.value)
 })
-const animateCSS = (animation, prefix = 'animate__') =>
+const animateCSS = (node, animation, prefix = 'animate__') =>
   // We create a Promise and return it
   new Promise((resolve, reject) => {
     const animationName = `${prefix}${animation}`
-    const node = titleRef.value
-
-    node.classList.add(`${prefix}animated`, animationName)
-
-    // When the animation ends, we clean the classes and resolve the Promise
-    function handleAnimationEnd(event) {
-      event.stopPropagation()
-      node.classList.remove(`${prefix}animated`, animationName)
-      resolve('Animation ended')
+    if (node) {
+      node.classList.add(`${prefix}animated`, animationName)
+      // When the animation ends, we clean the classes and resolve the Promise
+      function handleAnimationEnd(event) {
+        event.stopPropagation()
+        node.classList.remove(`${prefix}animated`, animationName)
+        resolve('Animation ended')
+      }
+      node.addEventListener('animationend', handleAnimationEnd, { once: true })
     }
-
-    node.addEventListener('animationend', handleAnimationEnd, { once: true })
   })
 </script>