From d689ee8c900ab39a8cfad2f741e5112345bd086b Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Wed, 24 May 2023 14:52:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5=E5=8A=A8=E7=94=BB=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                |  7 ++++---
 src/components/HeadLine.vue | 34 ++++++++++++++++++++++++++++++++--
 src/main.js                 |  1 +
 yarn.lock                   |  5 +++++
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 748e53c..d392d95 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
+    "autoprefixer": "^10.4.14",
     "pinia": "^2.0.32",
-    "vue": "^3.2.45",
-    "vue-router": "^4.0.13",
     "postcss-px-to-viewport": "^1.1.1",
-    "autoprefixer": "^10.4.14"
+    "vue": "^3.2.45",
+    "vue-router": "^4.0.13"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
diff --git a/src/components/HeadLine.vue b/src/components/HeadLine.vue
index aecd528..93fc001 100644
--- a/src/components/HeadLine.vue
+++ b/src/components/HeadLine.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="header_line_container">
-    <h2 class="title">{{ title }}</h2>
+  <div class="header_line_container" ref="el">
+    <h2 class="title" ref="titleRef">{{ title }}</h2>
     <p class="line"></p>
     <p class="desc" v-if="line1">
       {{ line1 }}
@@ -12,6 +12,9 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+const el = ref(null)
+const titleRef = ref(null)
 const props = defineProps({
   title: {
     type: String,
@@ -23,6 +26,33 @@ const props = defineProps({
     type: String,
   },
 })
+onMounted(() => {
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        animateCSS('bounce')
+      }
+    })
+  })
+  observer.observe(el.value)
+})
+const animateCSS = (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')
+    }
+
+    node.addEventListener('animationend', handleAnimationEnd, { once: true })
+  })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/main.js b/src/main.js
index 391ea0e..42e4c84 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import router from './router'
 import store from './store'
 import App from './App.vue'
+import 'animate.css'
 import './static/css/reset.css'
 import './style.scss'
 
diff --git a/yarn.lock b/yarn.lock
index 4e8a72c..959ef6c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -217,6 +217,11 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz"
   integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz"