状态过渡动画

本词条尚无可操作示例；插画为编辑示意。产品中仍需验证：动画是否存在独立于系统偏好的应用内关闭开关、prefers-reduced-motion 开启后是否真的降级而非仅仅缩短时长、终态内容在跳过动画时是否依然完整可读，以及过渡是否会延迟用户对新状态的下一步操作。

{
  "states": [
    "start",
    "transitioning",
    "end"
  ],
  "a11y": [
    "终态内容不依赖动画即可被读屏和视觉用户理解",
    "提供交互层面的关闭开关，并在系统开启减少动态偏好时自动降级",
    "降级后仍保留能说明状态已改变的静态提示（如即时替换内容或简单淡入淡出）"
  ],
  "motion": "默认沿曲线路径做位置、形态或透明度的连续过渡，播放一次即结束；启用减少动态效果时降级为简单的交叉淡入淡出或直接替换，不做位移或缩放"
}

{
  "id": "transition-animation",
  "type": "micro",
  "name": {
    "zh": "状态过渡动画",
    "en": "State Transition Animation"
  },
  "aliases": [
    "过渡动画",
    "Transition Animation",
    "State Change Animation"
  ],
  "granularity": "state",
  "intents": [
    "inform"
  ],
  "tags": [
    "过渡",
    "状态变化",
    "减少动态",
    "前庭障碍",
    "动效"
  ],
  "definition": "当界面元素从一种状态变为另一种状态（例如一个列表行展开为详情面板、一张卡片移动到新的位置）时，用位置、形态或透明度的连续变化展示起点与终点之间的关系，帮助用户理解“这个东西去哪儿了、变成了什么”；触发该动画的用户可以关闭它，且该动画须遵从系统级的减少动态偏好。",
  "boundary": "状态过渡动画只负责解释一次已经发生或即将完成的状态变化从何而来、去往何处，动画本身是解释性的，不是装饰。它不同于不确定进度指示——后者循环播放、不对应任何终点，用来报告工作仍在进行；也不同于按下状态反馈——后者只在按下与松开之间的瞬间确认输入被接收，与状态是否改变无关。“减少动态”不是一个独立词条，而是本词条的适配变体：无论动画本身多么精心设计，都必须能被交互触发方关闭，也必须服从 prefers-reduced-motion 等系统级偏好；关闭动画后，起点与终点状态仍须可读。",
  "signature": [
    "元素以连续的位置、形态或透明度变化，从起始状态过渡到目标状态",
    "过渡有明确终点，播放一次后结束，不循环、不代表未知时长的等待",
    "关闭动画或触发减少动态偏好后，终态内容依然可读，不依赖动画本身传达信息"
  ],
  "when": [
    "需要说明一个对象在展开、合并、进入或离开时与周围元素的空间或从属关系",
    "状态变化发生得太快，用户可能因为没看清起点而在新状态中迷失方向",
    "动画只是加分而非必需，且用户能在系统或应用设置中将其关闭"
  ],
  "when_not": [
    "等待时长未知且没有明确终点，应使用不确定进度指示而不是过渡动画",
    "反馈只需确认一次按压被系统收到，应使用按下状态反馈而不是过渡动画",
    "用户已经开启系统级减少动态偏好，却仍强制播放完整的位移或缩放动画"
  ],
  "tradeoff": "连续的过渡能让状态变化的因果关系一目了然，但会略微推迟用户对新状态的操作时机，且对有前庭障碍的用户可能引发不适；因此动画时长要短、可关闭，终态必须不依赖动画即可理解。",
  "comparison": {
    "focus": "解释一个元素从哪里来、变成了什么，而不是报告等待了多久",
    "mechanism": "一次性播放、有明确起点和终点的位置/形态/透明度变化",
    "cost": "需要额外实现关闭开关与减少动态适配，否则可能拖慢操作或引发不适"
  },
  "sources": [
    {
      "id": "wcag22-animation-from-interactions",
      "title": "W3C WAI · Understanding SC 2.3.3 Animation from Interactions (Level AAA)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html",
      "claim": "该准则为 AAA 级，要求由交互触发的动态动画可以被关闭，除非该动画对功能或所传达的信息是必要的；文中说明动画对前庭障碍用户的影响可能很严重，可能引发恶心、偏头痛甚至需要卧床恢复。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html",
        "status": "available",
        "checkedAt": "2026-09-16T05:47:58.519Z",
        "jobId": "spn2-9f483d81ce18ab6f62b96e83d221135f777bd100",
        "url": "https://web.archive.org/web/20260916054822/https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html",
        "timestamp": "20260916054822"
      }
    },
    {
      "id": "mdn-prefers-reduced-motion",
      "title": "MDN · prefers-reduced-motion",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion",
      "claim": "该媒体特性用于探测用户是否在设备上开启了减少非必要动态效果的偏好，取值 no-preference 或 reduce；文档说明缩放、平移等大幅动画可能是前庭运动障碍的诱因，开发者应在 reduce 时移除、削减或替换这类动画。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion",
        "status": "pending",
        "checkedAt": "2026-09-16T05:48:16.625Z",
        "error": "status-request-failed",
        "jobId": "spn2-2c6b3a877688a0100a9b7e7ad1d265959f60099b"
      }
    }
  ],
  "relations": [
    {
      "target": "indeterminate-progress",
      "kind": "related",
      "condition": "两者都用动效表达系统状态，但一个有终点一个没有",
      "reason": "不确定进度指示循环播放、不对应任何完成量，用来说明系统仍在处理；状态过渡动画播放一次就结束，用来解释已知的起点如何变成已知的终点。",
      "basis": "editorial"
    },
    {
      "target": "pressed-state",
      "kind": "related",
      "condition": "都属于状态相关的即时视觉反馈",
      "reason": "按下状态反馈只确认按压这一瞬间被系统收到，不涉及状态本身的改变；状态过渡动画则专门展示状态改变前后的关系。",
      "basis": "editorial"
    },
    {
      "target": "modal-dialog",
      "kind": "composes_with",
      "condition": "模态对话框从触发它的元素打开或关闭",
      "reason": "过渡动画可以让对话框从触发源展开或收回，帮助用户理解对话框与背后内容的从属关系，但对话框本身的可访问性行为不依赖这段动画。",
      "basis": "editorial"
    },
    {
      "target": "inclusive-design",
      "kind": "informs",
      "condition": "为动效设计减少动态的适配方案",
      "reason": "把前庭障碍用户的风险纳入动效设计，是包容性设计在微交互层面的具体体现。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "动画由用户交互触发",
      "instruction": "提供关闭该动画的方式，并遵从系统级的减少动态偏好（如 prefers-reduced-motion），除非动画对功能或信息传达是必要的。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "过渡动画正在播放",
      "instruction": "不得因为动画尚未播完而推迟用户对新状态可执行的操作；动画时长应短于用户等待响应可接受的时间。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "设计过渡要传达的信息",
      "instruction": "不要只靠动画本身传达状态变化，关闭动画或跳过动画后，起点与终点状态必须仍可通过静态内容读懂。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "start",
      "transitioning",
      "end"
    ],
    "a11y": [
      "终态内容不依赖动画即可被读屏和视觉用户理解",
      "提供交互层面的关闭开关，并在系统开启减少动态偏好时自动降级",
      "降级后仍保留能说明状态已改变的静态提示（如即时替换内容或简单淡入淡出）"
    ],
    "motion": "默认沿曲线路径做位置、形态或透明度的连续过渡，播放一次即结束；启用减少动态效果时降级为简单的交叉淡入淡出或直接替换，不做位移或缩放"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意。产品中仍需验证：动画是否存在独立于系统偏好的应用内关闭开关、prefers-reduced-motion 开启后是否真的降级而非仅仅缩短时长、终态内容在跳过动画时是否依然完整可读，以及过渡是否会延迟用户对新状态的下一步操作。",
  "image": {
    "src": "/images/transition-animation.webp",
    "alt": "虚构的 FIELDNOTES 卡片沿一条弧线路径以三个半透明分身依次呈现，从列表中的一行过渡到展开的面板；旁边并列一组简化的减少动态变体，只用一次简单的交叉淡入淡出表示同样的状态变化。"
  },
  "searchTerms": [
    "transition",
    "state change",
    "reduced motion",
    "vestibular disorder",
    "motion effect"
  ]
}