satori/satori
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

列表过渡动画

Browse Source
This commit is contained in:
satori 2024-08-26 14:42:38 +08:00
parent 3e2a993144
commit b3679030a6
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pages/blog/index.vue
View File

@ -1,3 +1,17 @@
<style>
@keyframes hysteresis {
from {
padding-top: 100px;
opacity: 0;
}
to {
padding-top: 0px;
opacity: 1;
}
}
</style>
<template lang="pug"> <template lang="pug">
div.container.mx-auto.py-24.flex.gap-8.w-full( div.container.mx-auto.py-24.flex.gap-8.w-full(
class=">sm:px-16 >sm:py-32" class=">sm:px-16 >sm:py-32"
@ -24,9 +38,10 @@ div.container.mx-auto.py-24.flex.gap-8.w-full(
// 展示blog列表 // 展示blog列表
div(v-if="!pending") div(v-if="!pending")
div.flex.flex-col.gap-0.w-full.mb-12( 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}" :class="{'bg-gray-100': item.__select}"
@click="event => selectItem(event,item)" @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.w-full.markdown.overflow-hidden(v-html="item.html")
div.flex.gap-4.text-gray-500.text-xs 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 }} time.text-xs(:datetime="updatedAt || createdAt") {{ date }}
// 右侧栏(aside) // 右侧栏(aside)
aside.w-64.py-2.flex.flex-col.gap-8(class="<sm:hidden") 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 span.font-bold # TAG
ul.flex.flex-wrap.gap-2.py-1 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( li.bg-gray-400.bg-opacity-10.px-2.rounded-md.cursor-pointer.overflow-clip(
class="hover:text-pink-500" class="hover:text-pink-500"
v-for="item in tags" :key="item" v-for="item in tags" :key="item"