动效设计与开关：操作反馈与阅读稳定性

推荐怎样加动效复制锚点链接

整站换装可以让首页关键构图一次短入场，并在操作引起变化的地方增加轻动效：引用面板展开和收起、菜单出现、折叠展开、复制成功、图示缩放。正文阅读区域保持稳定。外观入口提供一个明确的“动效”开关，只有开启和关闭两种状态，选择后立即生效并在本机保存。

普通首次访问默认开启轻动效。关闭后，面板、菜单和状态直接切换到结果，复制成功、加载、错误与焦点提示继续显示。用户主动滚动、拖动或缩放仍然可用。

这些是针对本站引用阅读任务的设计建议，尚未经过真实页面与读者验证。时长先沿用现有 120ms、180ms、280ms 档位，最终手感在运行验收后确定。

各处动效怎样表现复制锚点链接

新内容加载优先使用静态占位或简短状态，数据到达就显示。主文和引用同时可见时，循环闪光、呼吸或旋转容易反复吸引注意力；首轮没有必要把这些效果加入引用加载。

十套根据空间关系编排材料展开、标签、小节反馈与分页。主文位置保持，移动限定在变化区域；空间不足时使用覆盖查看或原位章节。外观和字号切换直接完成，避免全屏颜色缓慢漂移或文字逐步缩放。

本轮原型采用 Carbon 的 110ms、150ms、240ms 档作为轻反馈与局部转换起点，并使用 productive standard、entrance 与 exit 曲线。Fluent 2 的指导支持同级快速淡变、运动集中于当前关注区域与显式关闭。具体编排是本轮选择，持续时间有来源仍需运行观察。Carbon 当前 token、Fluent Motion

首轮不增加正文滚动入场、逐字出现、视差、弹簧晃动或持续背景动画。它们与核查引用的任务联系较弱，也会增加阅读干扰。

开关怎样使用复制锚点链接

“外观”入口内放一个“动效”开关，标签和当前状态足以说明用途，不再为每个面板、菜单分别增加同类控制。开关影响主页面、引用正文、弹层和图示操作；各处读取同一份选择。

只保存用户明确选择的开启或关闭，不另外保存一份可推导的“实际动效状态”。刷新、打开另一页和新开同站标签后继续采用该选择；已打开的引用面板同步更新。切换关闭时立即停止正在进行的装饰过渡，并让界面到达可操作的稳定状态。

系统有一个表示用户倾向少看动画的偏好，浏览器通过 prefers-reduced-motion 提供。它可以在用户尚未选择时决定开关初始值：普通情况开启，系统提出该偏好时关闭；用户随后明确选择开启或关闭，以用户选择为准。界面仍然只呈现一个开关。MDN 系统动效偏好

首次读取偏好前不播放入场动画，避免保存了关闭的读者先看到动画再停止。对用户来说，关闭涵盖本站界面的位移、淡入淡出、颜色过渡、平滑定位和图示惯性；加载、选中、成功或错误的静态提示继续存在。

这个开关不能仅靠 CSS 自动停止 GIF 图片或视频文件内部的播放。若正文后续使用自动播放的媒体，应单独提供静态替代或播放器控制，并核对它与全站开关的关系。本次未逐一检查所有正文媒体，也未承诺所有嵌入内容已可停止。

当前基础和实现路线复制锚点链接

截至 2026-10-05 的源码核查表明，本站已有动效参数与系统偏好适配，尚未提供上述站内开关。

首轮采用现有 CSS 与组件能力即可，不需要专门增加动效库。Base UI 官方提供状态属性和动效接线，并推荐容易中断与反向的 CSS transition。若后续确有复杂联动、弹簧或共享元素变化，再评估额外依赖。Base UI Animation

CSS 与 JavaScript 统一读取实际开关状态。现有系统媒体查询带有 !important，需要调整为只在用户尚未明确选择时生效；用户明确开启后，CSS 过渡、滚动与图示设置同步恢复。只追加一个关闭分支无法满足这一规则。

局部淡入和位移优先用 opacity、transform，控制变化区域。持续改变宽度或网格会触发布局工作；性能指南建议优先避免需要反复布局或绘制的属性，但实际流畅度仍取决于页面和设备。web.dev 动画实现指南

关闭时也要正确完成操作复制锚点链接

当前安装的 Fumadocs 16.15.18 侧栏使用 onAnimationEnd 完成关闭后的隐藏状态。直接全局删除动画可能使这项收尾不发生。现有极短时长方案保留了动画完成路径；新组件也必须具备无动画情况下的清理、焦点返回与滚动锁释放。

浏览器在动画被移除时不会发送 animationend；transition 的时长和延迟都为零时也不会发送 transitionend。自写逻辑不能把这些事件作为唯一的完成条件。MDN animationend、MDN transitionend

图示还有独立的 JavaScript 动画。当前安装包 react-zoom-pan-pinch 更新配置不会自动取消已启动的动画帧；零时长设置也不能单独证明旧动画停止。需要通过公开能力验证中途停止，或验证保留当前缩放位置的重新挂载方案。此处是已发现的实现边界，尚未验证解决方案。

iframe 是独立文档，不继承父页面的 CSS 属性或 React 状态。预览页加载前应初始化偏好，准备完成后同步当前选择，后续切换继续通知；它的 CSS 和 Mermaid 都要应用同一结果。不能仅把父页面开关接好，就认为引用内容也已覆盖。

关闭时只移除装饰位移和过渡，不能全局清掉 transform：布局定位和用户控制的图示位置也可能使用这个属性。

标准与验收边界复制锚点链接

WCAG 2.3.3 属于 AAA，要求交互触发的非必要运动动画可关闭；纯颜色和透明度变化与位置、尺寸运动在该条定义中有所区分。本站开关按用户预期同时关闭这些界面过渡。Animation from Interactions

WCAG 2.2.2 属于 A，约束自动开始、持续超过五秒、与其他内容同时呈现的移动、闪烁或滚动信息，并允许必要活动例外；自动更新信息没有五秒门槛。一次由点击启动的短面板过渡，不能直接套用为必须另加暂停按钮。Pause, Stop, Hide

本次完成源码与官方资料核查，十套中性原型共用开启、关闭、偏好保存与关闭收尾逻辑；正式站点尚未接入。原型使用原生 CSS 和 Web Animations API，不依赖额外运动库。未进行浏览器、视觉或真实读者验收。