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,35 +33,57 @@ const cardItems = ref([
 <template>
 
   <img alt="" class="w-max" src="/img/product/beenFactory/banner.png">
-
-  <TitleDescription
-      description="将物联网、人工智能技术与蜂场管理需求紧密融合，配套环境监控软硬件设备，实现对蜂场环境信息自动获取、分析和预警，为管理者提供
+  <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="服务简介"
-  />
+        subtitle="SERVICE INTRODUCTION"
+        title="服务简介"
+    />
+  </Motion>
 
-
-  <UPageCTA
+  <Motion
       v-for="(item, index) in cardItems"
       :key="index"
-      :description="item.description"
-      :reverse="index % 2 == 0"
-      :title="item.title"
-      :ui="{
-                title: 'font-semibold text-lg text-primary',
-            }"
-      :variant="index % 2 === 0 ? 'soft' : 'naked'"
-      orientation="horizontal"
+      :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
+      }"
   >
-    <img
-        :src="item.image"
-        alt="Illustration"
-        class="w-full rounded-lg"
-        height="364"
-        width="320"
+    <UPageCTA
+        :description="item.description"
+        :reverse="index % 2 == 0"
+        :title="item.title"
+        :ui="{
+                  title: 'font-semibold text-lg text-primary',
+              }"
+        :variant="index % 2 === 0 ? 'soft' : 'naked'"
+        orientation="horizontal"
     >
-  </UPageCTA>
+      <img
+          :src="item.image"
+          alt="Illustration"
+          class="w-full rounded-lg"
+          height="364"
+          width="320"
+      >
+    </UPageCTA>
+  </Motion>
 
 
 </template>