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">
-
+  <Motion
-  <TitleDescription
+      :in-view-options="{ once: true }"
-      description="将物联网、人工智能技术与蜂场管理需求紧密融合，配套环境监控软硬件设备，实现对蜂场环境信息自动获取、分析和预警，为管理者提供
+      :initial="{ opacity: 0,scale:0 }"
+      :transition="{   duration: 0.6,delay: 0.1}"
+      :while-in-view="{ opacity: 1,scale:1 }"
+  >
+    <TitleDescription
+        description="将物联网、人工智能技术与蜂场管理需求紧密融合，配套环境监控软硬件设备，实现对蜂场环境信息自动获取、分析和预警，为管理者提供
       标准化、智能化的蜂场管理工具，大大减少现场巡视成本，提高了蜂场管理效率和质量。"
-      subtitle="SERVICE INTRODUCTION"
+        subtitle="SERVICE INTRODUCTION"
-      title="服务简介"
+        title="服务简介"
-  />
+    />
+  </Motion>
 
-
+  <Motion
-  <UPageCTA
       v-for="(item, index) in cardItems"
       :key="index"
-      :description="item.description"
+      :in-view-options="{ once: true }"
-      :reverse="index % 2 == 0"
+      :initial="{
-      :title="item.title"
+        opacity: 0,
-      :ui="{
+        x: index % 2 === 0 ? -100 : 100
-                title: 'font-semibold text-lg text-primary',
+      }"
-            }"
+      :transition="{ 
-      :variant="index % 2 === 0 ? 'soft' : 'naked'"
+        duration: 0.8, 
-      orientation="horizontal"
+
+        ease: 'easeOut'
+      }"
+      :while-in-view="{
+        opacity: 1,
+        x: 0
+      }"
   >
-    <img
+    <UPageCTA
-        :src="item.image"
+        :description="item.description"
-        alt="Illustration"
+        :reverse="index % 2 == 0"
-        class="w-full rounded-lg"
+        :title="item.title"
-        height="364"
+        :ui="{
-        width="320"
+                  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>