更新页面效果

vite-tailwindcss/src/components/PhotoGallery.vue

@@ -40,8 +40,9 @@
 <!--    <div v-else-if="page.type === 'nine-grid'" v-reveal="{ variant: 'up', delay: 80 }" class="nine-grid grid grid-cols-3 gap-1.5 px-4 mt-6">-->
     <div v-else-if="page.type === 'nine-grid'" class="nine-grid grid grid-cols-3 gap-1.5 px-4 mt-6">
       <div v-for="(img, imgIdx) in page.images" :key="imgIdx"
+           v-reveal="getRevealConfig(imgIdx)"
            class="aspect-square relative" :class="frameClass">
-        <img :src="img" loading="lazy" decoding="async" class="nine-grid-img" />
+        <img :src="img" class="nine-grid-img" />
       </div>
     </div>
 
@@ -137,6 +138,34 @@ function polaroidTransform(i) {
   const s = polaroidShift[i % polaroidShift.length]
   return `rotate(${a}deg) translateY(${s}px)`
 }
+
+
+function getRevealConfig(imgIdx) {
+  const row = Math.floor(imgIdx / 3)
+  const col = imgIdx % 3
+
+  // 正中心
+  if (imgIdx === 4) {
+    return {
+      variant: 'blur',
+      delay: 200,
+    }
+  }
+
+  // 中间列：上 → down，下 → up
+  if (col === 1) {
+    return {
+      variant: row === 0 ? 'down' : 'up',
+      delay: 80 + imgIdx * 50,
+    }
+  }
+
+  // 左右列
+  return {
+    variant: col === 0 ? 'left' : 'right',
+    delay: 80 + ((imgIdx +80) * 12) ,
+  }
+}
 </script>
 
 <style scoped>