motion-example

app/pages/example/index.vue

@@ -2,6 +2,7 @@
 
 import type {TabsItem} from "@nuxt/ui";
 import {getPartnersByType,} from '@/data/partners'
+import {Motion} from "motion-v"
 
 const governmentPartners = getPartnersByType('government')
 const universityPartners = getPartnersByType('university')
@@ -75,7 +76,7 @@ const tabsItems = [
     <UPageSection
         :style="{ backgroundImage: `url('/img/about/bg.png')` ,    }"
         :ui="{container:'lg:py-3'}"
-        class="space-y-6 bg-cover bg-no-repeat bg-center w-full mb-4">
+        class="space-y-6 bg-fixed bg-no-repeat bg-center w-full mb-4 min-h-screen">
       <view class="grid grid-cols-3 lg:grid-cols-5 gap-4 lg:gap-6 items-center">
         <!-- 每个单元格单独循环 -->
         <view v-for="item in items" :key="item.name" class="text-center">
@@ -101,23 +102,53 @@ const tabsItems = [
 
         <!-- 政府单位 -->
         <template #government="{ item }">
-          <ExamplePartnerGrid :partners="governmentPartners"/>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <ExamplePartnerGrid :partners="governmentPartners"/>
+          </Motion>
         </template>
         <!-- 科研机构 -->
         <template #research="{ item }">
-          <ExamplePartnerGrid :partners="universityPartners"/>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <ExamplePartnerGrid :partners="universityPartners"/>
+          </Motion>
         </template>
         <!-- 大型企业 -->
         <template #enterprise="{ item }">
-          <ExamplePartnerGrid :partners="enterprisePartners "/>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <ExamplePartnerGrid :partners="enterprisePartners "/>
+          </Motion>
         </template>
         <!-- 综合试验点 -->
         <template #pilot="{ item }">
-          <ExamplePartnerGrid :partners="pilotPartners "/>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <ExamplePartnerGrid :partners="pilotPartners "/>
+          </Motion>
         </template>
         <!-- 养蜂合作社 -->
         <template #cooperative="{ item }">
-          <ExamplePartnerGrid :partners="cooperativePartners "/>
+          <Motion
+            :initial="{ x: 100, opacity: 0 }"
+            :animate="{ x: 0, opacity: 1 }"
+            :transition="{ duration: 0.6, ease: 'easeOut' }"
+          >
+            <ExamplePartnerGrid :partners="cooperativePartners "/>
+          </Motion>
         </template>
       </UTabs>
     </upagesection>