列表过渡动画

pages/blog/index.vue

@@ -1,3 +1,17 @@
+<style>
+@keyframes hysteresis {
+  from {
+    padding-top: 100px;
+    opacity: 0;
+  }
+
+  to {
+    padding-top: 0px;
+    opacity: 1;
+  }
+}
+</style>
+
 <template lang="pug">
 div.container.mx-auto.py-24.flex.gap-8.w-full(
   class=">sm:px-16 >sm:py-32"
@@ -24,9 +38,10 @@ div.container.mx-auto.py-24.flex.gap-8.w-full(
     // 展示blog列表
     div(v-if="!pending")
       div.flex.flex-col.gap-0.w-full.mb-12(
-        v-for="item in data.filter(x => !x.title)", :key="item.id" tabindex="0"
+        v-for="item, index in data.filter(x => !x.title)", :key="item.id" tabindex="0"
         :class="{'bg-gray-100': item.__select}"
         @click="event => selectItem(event,item)"
+        :style="`animation: hysteresis .75s ease .${index*1}s 1 normal backwards;`"
       )
         div.w-full.markdown.overflow-hidden(v-html="item.html")
         div.flex.gap-4.text-gray-500.text-xs
@@ -42,10 +57,9 @@ div.container.mx-auto.py-24.flex.gap-8.w-full(
               time.text-xs(:datetime="updatedAt || createdAt") {{ date }}
   // 右侧栏(aside)
   aside.w-64.py-2.flex.flex-col.gap-8(class="<sm:hidden")
-    div(v-if="!tagPending")
+    div(v-if="!tagPending && tags.length")
       span.font-bold # TAG
       ul.flex.flex-wrap.gap-2.py-1
-        // v-for="item in ['vue','react','node']" :key="item"
         li.bg-gray-400.bg-opacity-10.px-2.rounded-md.cursor-pointer.overflow-clip(
           class="hover:text-pink-500"
           v-for="item in tags" :key="item"