refactor(PostPage): 将动画类从PostCard移到外部div

将动画相关的class和style属性从PostCard组件移动到包裹它的div元素,以提高组件结构的清晰度和可维护性
This commit is contained in:
二叉树树
2026-01-03 20:51:19 +08:00
parent 8b976a4605
commit dbb83ab227

View File

@@ -12,17 +12,17 @@ const interval = 50;
<div class="transition flex flex-col rounded-[var(--radius-large)] bg-transparent gap-4 mb-4">
{page.data.map((entry: CollectionEntry<"posts">) => (
<PostCard
entry={entry}
title={entry.data.title}
published={entry.data.published}
updated={entry.data.updated}
url={getPostUrlBySlug(entry.slug)}
image={entry.data.image}
description={entry.data.description}
draft={entry.data.draft}
class:list="onload-animation"
style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}
></PostCard>
<div class="onload-animation" style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}>
<PostCard
entry={entry}
title={entry.data.title}
published={entry.data.published}
updated={entry.data.updated}
url={getPostUrlBySlug(entry.slug)}
image={entry.data.image}
description={entry.data.description}
draft={entry.data.draft}
></PostCard>
</div>
))}
</div>