引入动画库

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",

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>

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'
 

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"