Jiao77/astro-jiao77.cn

Fork 0

Files

Jiao77 96b50327f3 finally finish all website check in.

2025-10-01 09:51:06 +08:00

3.2 KiB

Raw Blame History

标题块动画统一同步

修改概述

将报告页面的标题块动画与首页保持一致，使用 AnimatedElement 组件替代 Container 的 revealDistance 属性，实现统一的 fadeInUp 动画效果。

修改详情

1. 技术报告索引页面 (`/src/pages/report/index.astro`)

修改内容：

添加 AnimatedElement 组件导入
将 Container 组件包裹在 AnimatedElement 中
移除 Container 的 revealDistance 属性
设置 fadeInUp 动画，延迟 200ms

修改前：

<Container
  variant="glass"
  size="large"
  padding="xl"
  className="text-center mb-12"
  revealDistance="48px"
>

修改后：

<AnimatedElement animation="fadeInUp" delay={200}>
  <Container
    variant="glass"
    size="large"
    padding="xl"
    className="text-center mb-12"
  >

2. 20250609 报告页面 (`/src/pages/report/20250609/index.astro`)

修改内容：

添加 AnimatedElement 组件导入
将 Container 组件包裹在 AnimatedElement 中
移除 Container 的 revealDistance 属性
移除 section 的 data-reveal 相关属性
设置 fadeInUp 动画，延迟 200ms

修改前：

<section id="intro" class="report-header scroll-mt-16" data-reveal data-reveal-distance="64px">
  <Container
    variant="glass"
    size="full"
    padding="xl"
    className="text-center mb-12 mt-24"
    revealDistance="56px"
  >

修改后：

<section id="intro" class="report-header scroll-mt-16">
  <AnimatedElement animation="fadeInUp" delay={200}>
    <Container
      variant="glass"
      size="full"
      padding="xl"
      className="text-center mb-12 mt-24"
    >

3. 20250722 报告页面 (`/src/pages/report/20250722/index.astro`)

状态： 已经使用 AnimatedElement，无需修改

该页面已经正确使用了 AnimatedElement 包裹 Container
动画效果与其他页面保持一致

技术优势

1. 动画一致性

所有页面标题块使用相同的 fadeInUp 动画
统一的延迟时间（200ms）确保用户体验一致性
避免了不同页面间动画效果的不协调

2. 代码规范性

统一使用 AnimatedElement 组件管理动画
移除了不规范的混合使用 revealDistance 和 data-reveal
提高了代码的可维护性和可读性

3. 性能优化

AnimatedElement 使用 Intersection Observer API
更高效的滚动事件处理
避免了重复的动画逻辑实现

验证结果

✅ 构建验证： npm run build 成功

0 错误
0 警告
0 提示
所有页面正常生成

✅ 功能验证：

标题块动画效果统一
进入动画流畅自然
移动端适配良好

文件修改列表

/src/pages/report/index.astro - ✅ 已修改
/src/pages/report/20250609/index.astro - ✅ 已修改
/src/pages/report/20250722/index.astro - ✅ 已符合规范

后续建议

统一其他动画元素： 考虑将其他页面中的自定义动画也统一使用 AnimatedElement
动画时序优化： 可以考虑为不同类型的内容设置递进的延迟时间
响应式适配： 确保动画在不同设备上的表现效果一致

修改日期：2025年10月1日
状态：已完成

3.2 KiB Raw Blame History Unescape Escape