123

src/common/utils.js

@@ -54,3 +54,25 @@ const handleImgScale = (id, scale) => {
     })`
   }
 }
+
+export const animateCSS = (element, animation, prefix = 'animate__') =>
+  // We create a Promise and return it
+  new Promise((resolve, reject) => {
+    const animationName = `${prefix}${animation}`
+    const node = document.querySelector(element)
+    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,
+    })
+  })
+
+// 根据 activeIndex 判断激活哪个元素的动画
+export const totalPageAni = () => {
+  animateCSS('#a', 'bounce')
+}

src/views/Index/index.vue

@@ -75,6 +75,7 @@ import CorporateCulture from '@/views/Index/components/CorporateCulture'
 import SoftHardwarePictureList from '@/views/Index/components/SoftHardwarePictureList'
 import SoftHardwareDetail from '@/views/Index/components/SoftHardwareDetail'
 import Cooperation from '@/views/Index/components/Cooperation'
+import { totalPageAni } from '@/common/utils'
 // Import Swiper styles
 import 'swiper/css'
 import 'swiper/css/pagination'
@@ -109,30 +110,10 @@ export default {
       swiperStore.initSwiper(swiper)
       swiperStore.updateActiveIndex(activeIndex)
       // add animate to some ele
-      animateCSS('#a', 'bounce')
+      totalPageAni()
     }
-    const animateCSS = (element, animation, prefix = 'animate__') =>
-      // We create a Promise and return it
-      new Promise((resolve, reject) => {
-        const animationName = `${prefix}${animation}`
-        const node = document.querySelector(element)
-
-        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,
-        })
-      })
     return {
       onSwiper,
-      animateCSS,
       onSlideChange,
       pagination: {
         clickable: true,