加入动画

src/components/AboutUs.vue

@@ -5,9 +5,9 @@
       line1="专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队"
       line2="软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。"
     />
-    <div class="more_btn" @click="toAboutPage()">
-      <span>了解更多</span>
-      <span>→</span>
+    <div class="more_btn" @click="toAboutPage()" ref="el">
+      <span ref="elLeft">了解更多</span>
+      <span ref="elRight">→</span>
     </div>
     <FourCard />
   </div>
@@ -17,10 +17,26 @@
 import HeadLine from '@/components/HeadLine'
 import FourCard from '@/components/FourCard'
 import { useRouter } from 'vue-router'
+import { animateCSS } from '@/constant'
+import { ref, onMounted } from 'vue'
 const router = useRouter()
 const toAboutPage = () => {
   router.push('/about')
 }
+const elRight = ref(null)
+const elLeft = ref(null)
+const el = ref(null)
+onMounted(() => {
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        animateCSS(elRight.value, 'backInRight')
+        animateCSS(elLeft.value, 'backInLeft')
+      }
+    })
+  })
+  observer.observe(el.value)
+})
 </script>
 
 <style lang="scss" scoped>

src/components/HeadLine.vue

@@ -13,6 +13,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { animateCSS } from '@/constant'
 const el = ref(null)
 const props = defineProps({
   title: {
@@ -38,21 +39,6 @@ onMounted(() => {
   })
   observer.observe(el.value)
 })
-const animateCSS = (node, animation, prefix = 'animate__') =>
-  // We create a Promise and return it
-  new Promise((resolve, reject) => {
-    const animationName = `${prefix}${animation}`
-    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 })
-    }
-  })
 </script>
 
 <style lang="scss" scoped>

src/components/Product.vue

@@ -69,13 +69,14 @@ import A1 from '@/static/img/index/a1.png'
       height: 393px;
       box-sizing: border-box;
       position: relative;
+
       .product_img {
         width: 100%;
         height: 100%;
         &:hover {
           ~ {
             .detail_show_container {
-              display: flex;
+              width: 100%;
             }
           }
         }
@@ -96,7 +97,7 @@ import A1 from '@/static/img/index/a1.png'
         &:hover {
           ~ {
             .detail_show_container {
-              display: flex;
+              width: 100%;
             }
           }
         }
@@ -114,15 +115,19 @@ import A1 from '@/static/img/index/a1.png'
         }
       }
       .detail_show_container {
-        display: none;
+        display: flex;
         position: absolute;
         top: 0;
-        width: 100%;
+        width: 0;
         background: #fcfcfc;
         height: 100%;
+        overflow: hidden;
         box-sizing: border-box;
         z-index: 20;
         padding: 94px 0 194px 0;
+        transition-property: all;
+        animation-fill-mode: forwards;
+        transition-duration: 0.5s;
         .content {
           border-left: solid 4px #f95926;
           width: 80%;

src/components/about/Intro.vue

@@ -48,7 +48,7 @@ import HeadLine from '@/components/HeadLine.vue'
         font-size: 55px;
         font-family: Zona Pro;
         font-weight: 900;
-        color: #5064f4;
+        color: $theme-color;
       }
       .unit {
         margin-left: 22px;

src/components/detail/Overview.vue

@@ -12,8 +12,8 @@
             快速的帮助工程师从环境上优化机器视觉方案 双 x
           </p>
           <div class="btn">
-            <span>联系我们</span>
-            <span>→</span>
+            <span class="animate__animated animate__backInLeft">联系我们</span>
+            <span class="animate__animated animate__backInRight">→</span>
           </div>
         </div>
       </div>
@@ -90,7 +90,7 @@ const changeTab = index => {
         .btn {
           width: 206px;
           height: 55px;
-          background: linear-gradient(90deg, #7182ff, #5064f4);
+          background: $btn-gradient;
           border-radius: 28px;
           display: flex;
           cursor: pointer;

src/components/detail/Parameter.vue

@@ -51,7 +51,7 @@ import HeadLine from '../HeadLine'
     .tb_header {
       display: flex;
       align-items: center;
-      background: #5064f4;
+      background: $theme-color;
       height: 90px;
       font-size: 28px;
       font-weight: 500;

src/components/detail/RelativeMerits.vue

@@ -101,7 +101,7 @@ import Info from './Info'
         height: 365px;
       }
       .new_btn {
-        background: linear-gradient(90deg, #7182ff, #5064f4);
+        background: $btn-gradient;
       }
       .old_btn {
         background: #cbcbcb;

src/constant/index.js

@@ -1,3 +1,19 @@
 // export const DOMAIN = 'https://www.iflytop.com'
 
 export const DOMAIN = 'http://localhost:5173'
+
+export const animateCSS = (node, animation, prefix = 'animate__') =>
+  // We create a Promise and return it
+  new Promise((resolve, reject) => {
+    const animationName = `${prefix}${animation}`
+    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 })
+    }
+  })