更新页面效果

vite-tailwindcss/src/components/CanvasEffects.vue

@@ -167,11 +167,11 @@ onUnmounted(() => {
 
 <style scoped>
 .canvas-effects {
-  position: absolute;
+  position: fixed;
   inset: 0;
   z-index: 1;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   pointer-events: none;
 }
 </style>

vite-tailwindcss/src/components/PhotoGallery.vue

@@ -37,8 +37,13 @@
     </div>
 
     <!-- 九宫格 -->
-    <div v-else-if="page.type === 'nine-grid'" class="grid grid-cols-3 gap-1.5 px-4 mt-6">
-      <div v-for="(img, imgIdx) in page.images" :key="imgIdx" v-reveal="{ variant: 'up', delay: imgIdx * 24 }"
+    <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"
+           data-aos="nine-grid-zoom"
+           :data-aos-delay="imgIdx * 200"
+           data-aos-duration="500"
+           data-aos-easing="ease-out-cubic"
+           data-aos-once="true"
            class="nine-grid-reveal aspect-square relative" :class="frameClass">
         <img :src="img" loading="lazy" decoding="async" class="nine-grid-img" />
       </div>
@@ -144,15 +149,19 @@ function polaroidTransform(i) {
 .gallery-subtitle { font-family: var(--font-display); }
 .gallery-desc { font-family: var(--font-kai); }
 
-.nine-grid-reveal.reveal {
-  transform: translate3d(0, 12px, 0);
-  transition:
-    opacity 420ms ease-out,
-    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
+.nine-grid-reveal {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+[data-aos='nine-grid-zoom'] {
+  opacity: 0;
+  transform: translate3d(0, 10px, 0) scale(0.94);
+  transition-property: opacity, transform;
   will-change: opacity, transform;
 }
-.nine-grid-reveal.reveal--in {
-  transform: translate3d(0, 0, 0);
+[data-aos='nine-grid-zoom'].aos-animate {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
 }
 .nine-grid-img {
   width: 100%;