feat: update demo section visibility and enhance waterfall item transition effects

Author: SeasonsChange422

src/App.vue

@@ -293,7 +293,7 @@
         </div>
       </section>
 
-      <section class="demo-section" v-if="false">
+      <section class="demo-section" v-if="true">
         <h2>瀑布流演示</h2>
 
         <div class="demo-group">
@@ -732,9 +732,6 @@ onBeforeUnmount(() => {
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  transition:
-    transform 0.3s,
-    box-shadow 0.3s;
   cursor: pointer;
 }
 

src/components/list/waterfall/tml-waterfall.vue

@@ -114,7 +114,7 @@ function ensureStyles(el: HTMLElement, width: number): void {
 function buildItems(): void {
   if (!containerRef.value) return
   itemsOrder.value = Array.from(containerRef.value.children) as HTMLElement[]
-  itemsOrder.value.forEach((el) => (el.style.transition = 'transform 0.2s ease'))
+  itemsOrder.value.forEach((el) => {el.style.opacity = el.style.opacity || '0'})
 }
 
 /**
@@ -169,6 +169,8 @@ function doLayout(start: number): void {
       el.style.transform = `translate(${left}px, ${top}px)`
       itemMeta.set(el, { col: targetCol, top, height: h })
       cols[targetCol] = top + h + props.gap
+      el.style.transition = 'opacity 0.4s ease'
+      el.style.opacity = '1'
     }
 
     // 设置容器高度