beenfactory动效添加

app/components/product/beenFactory/Hero.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import TitleDescription from "~/components/TitleDescription.vue";
+import {Motion} from "motion-v";
 
 const cardItems = ref([
   {
@@ -32,18 +33,39 @@ const cardItems = ref([
 <template>
 
   <img alt="" class="w-max" src="/img/product/beenFactory/banner.png">
-
+  <Motion
+      :in-view-options="{ once: true }"
+      :initial="{ opacity: 0,scale:0 }"
+      :transition="{   duration: 0.6,delay: 0.1}"
+      :while-in-view="{ opacity: 1,scale:1 }"
+  >
     <TitleDescription
         description="将物联网、人工智能技术与蜂场管理需求紧密融合，配套环境监控软硬件设备，实现对蜂场环境信息自动获取、分析和预警，为管理者提供
       标准化、智能化的蜂场管理工具，大大减少现场巡视成本，提高了蜂场管理效率和质量。"
         subtitle="SERVICE INTRODUCTION"
         title="服务简介"
     />
+  </Motion>
 
-
-  <UPageCTA
+  <Motion
       v-for="(item, index) in cardItems"
       :key="index"
+      :in-view-options="{ once: true }"
+      :initial="{
+        opacity: 0,
+        x: index % 2 === 0 ? -100 : 100
+      }"
+      :transition="{ 
+        duration: 0.8, 
+
+        ease: 'easeOut'
+      }"
+      :while-in-view="{
+        opacity: 1,
+        x: 0
+      }"
+  >
+    <UPageCTA
         :description="item.description"
         :reverse="index % 2 == 0"
         :title="item.title"
@@ -61,6 +83,7 @@ const cardItems = ref([
           width="320"
       >
     </UPageCTA>
+  </Motion>
 
 
 </template>