123

src/views/Index/components/Service/index.vue

@@ -7,7 +7,7 @@
           <h1 class="big_title">
             一站式 <span class="blue_font">产品研发/设计服务</span>
           </h1>
-          <p class="article">
+          <p class="article" id="a">
             产品梦工厂一家公司全部帮您搞定，减少供应商数<br />量就能防止供应商
             <span class="blue_font">扯皮/推诿</span>帮您省心省力还能帮<br />
             您 &nbsp; &nbsp;<span class="blue_font">节省30%</span>&nbsp;

src/views/Index/index.vue

@@ -108,9 +108,31 @@ export default {
       const swiperStore = useSwiperStore()
       swiperStore.initSwiper(swiper)
       swiperStore.updateActiveIndex(activeIndex)
+      // add animate to some ele
+      animateCSS('#a', 'bounce')
     }
+    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,