fix: 修复移动端 UI 问题
- 修复侧边抽屉文章目录在 PJAX 页面切换后不重新初始化的问题 - 优化涟漪点击效果:将结束动画从 scale 收缩改为 opacity 淡出 - 添加暗黑/明亮模式切换过渡动画(250ms 平滑过渡) - 优化分享面板动画:添加退出时的反向错落延迟 - 添加分享面板移动端响应式适配,防止视口溢出
This commit is contained in:
@@ -2,17 +2,16 @@
|
||||
|
||||
## Introduction
|
||||
|
||||
本文档定义了 ArgonAve 主题隐私政策页面及相关移动端 UI 问题的修复需求。主要涉及侧边抽屉栏功能缺失、转发按钮动画异常、以及首页文章特色图片显示问题。
|
||||
本文档定义了 Argon 主题隐私政策页面移动端 UI 问题的修复需求。该页面未正确应用全局样式设置,导致侧边抽屉栏功能异常(文章目录、多邻国连胜、点击动画、主题切换)以及文章页面转发功能的动画问题。
|
||||
|
||||
## Glossary
|
||||
|
||||
- **Sidebar_Drawer**: 移动端侧边折叠抽屉组件,包含文章目录、多邻国连胜记录等功能
|
||||
- **TOC_Generator**: 文章目录生成器,根据文章标题自动生成导航目录
|
||||
- **Duolingo_Streak**: 多邻国连胜记录显示组件
|
||||
- **Ripple_Effect**: 涟漪点击效果动画
|
||||
- **Sidebar_Drawer**: 移动端侧边折叠抽屉组件,包含文章目录、多邻国连胜记录、主题切换等功能
|
||||
- **TOC_Generator**: 文章目录生成器,根据页面标题元素(h1-h6)自动生成导航目录
|
||||
- **Duolingo_Streak**: 多邻国连胜记录显示组件,展示用户的学习连胜天数
|
||||
- **Ripple_Effect**: Material Design 风格的涟漪点击效果动画
|
||||
- **Theme_Switcher**: 暗黑/明亮模式切换组件
|
||||
- **Share_Panel**: 文章分享面板组件
|
||||
- **Featured_Image**: 文章特色图片/缩略图组件
|
||||
- **Share_Panel**: 文章分享面板组件,提供多种社交平台分享选项
|
||||
|
||||
## Requirements
|
||||
|
||||
@@ -47,7 +46,7 @@
|
||||
1. WHEN 用户点击侧边抽屉中的按钮, THE Ripple_Effect SHALL 从点击位置向外扩散
|
||||
2. WHEN 涟漪动画结束, THE Ripple_Effect SHALL 以淡出方式消失,而非倒放收缩
|
||||
3. THE Ripple_Effect SHALL 使用 opacity 淡出而非 scale 收缩作为结束动画
|
||||
4. THE Ripple_Effect SHALL 动画时长控制在 300-400ms 范围内
|
||||
4. THE Ripple_Effect SHALL 将动画时长控制在 300-400ms 范围内
|
||||
|
||||
### Requirement 4: 暗黑/明亮模式切换流畅性
|
||||
|
||||
@@ -56,9 +55,9 @@
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN 用户切换主题模式, THE Theme_Switcher SHALL 使用平滑的颜色过渡动画
|
||||
2. THE Theme_Switcher SHALL 所有颜色变化使用 CSS transition,时长为 200-300ms
|
||||
3. THE Theme_Switcher SHALL 背景色、文字色、边框色同步过渡
|
||||
4. THE Theme_Switcher SHALL 避免闪烁或跳变效果
|
||||
2. THE Theme_Switcher SHALL 对所有颜色变化使用 CSS transition,时长为 200-300ms
|
||||
3. THE Theme_Switcher SHALL 确保背景色、文字色、边框色同步过渡
|
||||
4. THE Theme_Switcher SHALL 避免出现闪烁或跳变效果
|
||||
|
||||
### Requirement 5: 转发按钮退出动画优化
|
||||
|
||||
@@ -91,16 +90,4 @@
|
||||
1. THE Share_Panel SHALL 使用 GPU 加速属性(transform, opacity)进行动画
|
||||
2. THE Share_Panel SHALL 动画使用合适的缓动函数(ease-out 或 cubic-bezier)
|
||||
3. THE Share_Panel SHALL 避免动画过程中出现抖动或卡顿
|
||||
4. THE Share_Panel SHALL 分享图标按钮使用错落有致的出现动画
|
||||
|
||||
### Requirement 8: 首页文章特色图片显示
|
||||
|
||||
**User Story:** As a 用户, I want 在首页看到文章的特色图片, so that 我可以通过视觉预览了解文章内容。
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN 文章设置了特色图片, THE Featured_Image SHALL 在首页文章列表中正确显示
|
||||
2. THE Featured_Image SHALL 图片尺寸和比例与卡片布局适配
|
||||
3. IF 文章没有设置特色图片, THEN THE Featured_Image SHALL 显示默认占位图或隐藏图片区域
|
||||
4. THE Featured_Image SHALL 支持懒加载以优化页面性能
|
||||
|
||||
4. THE Share_Panel SHALL 分享图标按钮使用错落有致的出现动画
|
||||
Reference in New Issue
Block a user