原文校正、版本边界与资料来源 / 中文方法笔记

原文校正、版本边界与资料来源

整理于 2026.10.23 · 6 个小节

整理日期:2026-10-23,Asia/Shanghai。本教材是对用户本地 skills 的中文导读和工程补充,不声称完整复刻 animations.dev 付费课程,也不把包内提到的产品案例当当前线上实测。

C.1 数量纠正

目录实际 15 个 SKILL.md,10 个配套 Markdown,共25个文件。前面对话曾口头误写16,本教材与 Space 目录全部按15计数。

C.2 需要带着边界理解的表述

原文简化说法正确的学习方式
高频/键盘操作绝不动画作者强调响应速度;必要反馈不能因此消失,频率数字不是标准阈值
UI 永不 ease-in,内置曲线几乎总不够强这是设计偏好;退出编排等场景可有其他曲线
Transition 与 spring 都保留速度CSS transition 的当前值衔接与 spring 的速度连续不同
Keyframes 无法中断重启固定端点容易跳;同一 Animation 可暂停/反向/定位
Transform/opacity 永远 GPU有机会只合成,实际受驱动、样式、浏览器与图层条件影响
所有 JS 都在主线程Worker 也可计算;DOM 与 rAF 驱动路径通常依赖主线程
Motion 全部主线程 / 全部加速混合引擎按版本、入口、属性与条件选择路径
父级 CSS 变量每次必定重算所有子孙有依赖追踪差异,继承更新仍是应测的扩大影响域风险
Scale 等价于尺寸变化子内容、布局、命中、文字与圆角可能完全不同
Opacity 等价于 display透明元素仍可能占布局、被聚焦和接收交互
Will-change 强制 GPU、能治所有1px偏移它是提示且可能增加成本;先定位真实原因
增大 damping 总能更快结束过阻尼可能更慢;与 stiffness、mass 一起看
Reduced motion 必须留下淡入保持意义即可,直接切换也是有效方案
MotionConfig 只允许 opacity/background自动禁用 transform/layout,其他动画可能继续
Placeholder 保证可访问名称需要真实 label,placeholder 不能替代它
translateZ 没 perspective 就毫无效果没有相应透视缩放,但深度仍可能影响遮挡
所有 SVG path 必须 Z只有需要闭合的形状才闭合,开放折线通常不能加 Z
PathLength=100 则百分比就是总长比例单位数字可归一,百分比另涉及 SVG 参考尺寸
3s 与4s周期永不对齐12s 会对齐,目标是避免短周期机械同步
useInView margin=100px 是元素出现100pxmargin 改检测根边界,不是可见量阈值
0.2s循环用-0.4s停在中间恰好两轮,回到同相位;负延迟按周期取模
降到11.0.10解决退出bug历史建议,不能不看锁版本和当前复现就降级
换原语只要五分钟/某库维护差依赖项目、版本、行为差异;不作当前事实背诵

C.3 React 退出的核对结果

AnimatePresence 默认 sync;wait 一次一个子项;popLayout 将退出项移出布局流,自定义直接子组件要正确传 ref;initial=false 只跳过初始已有项的入场。检查 presence 本身是否被卸载,不能只盯 key。官方 AnimatePresence。

C.4 尺寸与布局的核对结果

布局动画是测量真实布局变化后表现过渡。圆角、阴影纠偏要求对应样式通过 style 被读取,原包的内联像素值是稳妥配方,不概括为永久唯一形式。官方 Layout。

“CSS 不能动画到 auto”已不能作为不带条件的现代结论。Interpolate-size 在支持且启用的环境允许长度与内在尺寸关键字间插值,但不允许任意两个内在尺寸直接互插;动态 auto→auto 内容变化仍要具体分析。应检测支持、考虑受影响布局与回退。MDN interpolate-size。

C.5 其他已核对的官方资料

首次入场起始值与 display/top-layer 退出是不同问题,不能只加一个 starting-style 就完成卸载管理。MDN @starting-style。

UseInView 的 margin 调整检测根区域,once 控制重复观察。官方 useInView。

Reduce 自动关闭 transform/layout,其他动画继续与否仍需自己检查。官方 Accessibility。

动画成本同时取决于渲染工作与加速资格,CSS变量与特定变换路径有不同成本。官方 Performance。

核查过程优先使用 Context7:已解析 /websites/motion_dev,查询 Presence、MotionConfig、性能与布局;再直接核对上述官方页面。未对所有库、浏览器版本、课程案例做实际运行验收。本文不承诺用户项目已安装任何依赖。

C.6 教学示例与已验证演示

各章代码用于说明机制,部分是可组合片段,不冒充完整产品。需要实际样式、资源和原语时,在正文有说明。独立弹簧演示已测试:三档阻尼、反向保留速度、播放/暂停、逐帧与320/736宽布局;它不是 Motion 内部求解器的逐行复刻。

关于这份笔记

来自作者已整理的 Skills 中文自学资料。数字和配方是调试起点,库与浏览器的行为需结合实际版本验证;教材中的原演示验收记录不等同于你的项目已通过测试。

技术校正与版本边界 ↗完整来源说明 ↗
继续下一篇自主学习练习、逐帧观察与参考答案