VOCABULARY / 词条
状态过渡动画
State Transition Animation
当界面元素从一种状态变为另一种状态（例如一个列表行展开为详情面板、一张卡片移动到新的位置）时，用位置、形态或透明度的连续变化展示起点与终点之间的关系，帮助用户理解“这个东西去哪儿了、变成了什么”；触发该动画的用户可以关闭它，且该动画须遵从系统级的减少动态偏好。
识别特征
- 元素以连续的位置、形态或透明度变化，从起始状态过渡到目标状态
- 过渡有明确终点，播放一次后结束，不循环、不代表未知时长的等待
- 关闭动画或触发减少动态偏好后，终态内容依然可读，不依赖动画本身传达信息
概念边界
状态过渡动画只负责解释一次已经发生或即将完成的状态变化从何而来、去往何处，动画本身是解释性的，不是装饰。它不同于不确定进度指示——后者循环播放、不对应任何终点，用来报告工作仍在进行；也不同于按下状态反馈——后者只在按下与松开之间的瞬间确认输入被接收，与状态是否改变无关。“减少动态”不是一个独立词条，而是本词条的适配变体：无论动画本身多么精心设计，都必须能被交互触发方关闭，也必须服从 prefers-reduced-motion 等系统级偏好；关闭动画后，起点与终点状态仍须可读。
什么时候考虑它
- 需要说明一个对象在展开、合并、进入或离开时与周围元素的空间或从属关系
- 状态变化发生得太快，用户可能因为没看清起点而在新状态中迷失方向
- 动画只是加分而非必需，且用户能在系统或应用设置中将其关闭
什么时候慎用
- 等待时长未知且没有明确终点，应使用不确定进度指示而不是过渡动画
- 反馈只需确认一次按压被系统收到，应使用按下状态反馈而不是过渡动画
- 用户已经开启系统级减少动态偏好，却仍强制播放完整的位移或缩放动画
取舍
连续的过渡能让状态变化的因果关系一目了然，但会略微推迟用户对新状态的操作时机，且对有前庭障碍的用户可能引发不适；因此动画时长要短、可关闭，终态必须不依赖动画即可理解。
条件规则 · 编辑建议
相关词条
不确定进度指示循环播放、不对应任何完成量，用来说明系统仍在处理；状态过渡动画播放一次就结束，用来解释已知的起点如何变成已知的终点。
按下状态反馈只确认按压这一瞬间被系统收到，不涉及状态本身的改变；状态过渡动画则专门展示状态改变前后的关系。
过渡动画可以让对话框从触发源展开或收回，帮助用户理解对话框与背后内容的从属关系，但对话框本身的可访问性行为不依赖这段动画。
把前庭障碍用户的风险纳入动效设计，是包容性设计在微交互层面的具体体现。
来源与支持范围
该准则为 AAA 级，要求由交互触发的动态动画可以被关闭，除非该动画对功能或所传达的信息是必要的；文中说明动画对前庭障碍用户的影响可能很严重，可能引发恶心、偏头痛甚至需要卧床恢复。
检索日期：2026-09-15 · 存档于 2026-09-16该媒体特性用于探测用户是否在设备上开启了减少非必要动态效果的偏好，取值 no-preference 或 reduce；文档说明缩放、平移等大幅动画可能是前庭运动障碍的诱因，开发者应在 reduce 时移除、削减或替换这类动画。
检索日期：2026-09-15 · 存档于 2025-11-02定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
本词条尚无可操作示例；插画为编辑示意。产品中仍需验证：动画是否存在独立于系统偏好的应用内关闭开关、prefers-reduced-motion 开启后是否真的降级而非仅仅缩短时长、终态内容在跳过动画时是否依然完整可读，以及过渡是否会延迟用户对新状态的下一步操作。
{
"states": [
"start",
"transitioning",
"end"
],
"a11y": [
"终态内容不依赖动画即可被读屏和视觉用户理解",
"提供交互层面的关闭开关，并在系统开启减少动态偏好时自动降级",
"降级后仍保留能说明状态已改变的静态提示（如即时替换内容或简单淡入淡出）"
],
"motion": "默认沿曲线路径做位置、形态或透明度的连续过渡，播放一次即结束；启用减少动态效果时降级为简单的交叉淡入淡出或直接替换，不做位移或缩放"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。