过渡
Transition
初级通用过渡（Transition）是界面属性从一个状态变化到另一个状态时，呈现中间变化过程的动效。它让用户看清状态如何改变，例如侧边栏展开时，宽度不是瞬间跳到新值，而是在一小段时间内变化。
你可能会说：「我想让侧边栏打开时慢慢展开，关闭时也平滑收回，别突然跳一下。」
动手看看后台侧栏展开
把鼠标移入、移出左侧导航，反复看它展开和收起；也可以按 Tab 聚焦侧栏。切换参数会自动重播淡入，点「重播」也能再看一次。
设为 360ms 时，侧栏宽度会经过中间值，视线能跟上变化；这就是过渡，而不只是切换两个状态。
逐渐放慢让侧栏一开始就有响应，最后稳稳停住，适合这种频繁使用的导航。
要点过渡是怎么产生的？
- 1
先有状态变化，才有过渡
比如你点击按钮后，侧边栏从收起变为展开。过渡不负责决定何时展开，它负责呈现展开前后属性值的变化过程。没有前后两个状态，单独设置过渡不会让界面动起来。
- 2
明确变化的属性与时长
你可以让透明度、位置或颜色在状态切换时逐渐变化，并指定持续多久。这样 AI Agent 才知道该处理哪部分；如果只说“加点过渡”，它可能连不相关的属性也一起改了。
- 3
用变化节奏说明交互感受
缓动决定变化过程中快慢如何分配：例如弹窗可以较快进入、放慢停下，让出现过程容易察觉。过渡时间太长会拖慢操作反馈；拿不准时，我们可以先实现，再实际点击感受。
容易混淆的地方
过渡处理的是状态改变时，从旧值到新值的变化；动画通常可以按关键帧安排多个阶段，也能在没有交互触发时循环播放。缓动不是另一种过渡，而是控制过渡过程中快慢的方式。比如按钮悬停后变色适合过渡，持续旋转的加载图标更适合动画。
什么时候用
适合用
- 做后台侧边栏时，让展开和收起的位置变化有过程，用户更容易看出内容去了哪里。
- 做筛选面板时，让面板出现和退出的透明度逐渐变化，帮助用户察觉当前操作改变了什么。
- 做按钮交互时，让悬停或按下后的颜色变化有短暂过程，而不是在两个颜色间突然切换。
不适合用
- 加载指示器需要在等待期间持续旋转，而不是在两个状态间切换；这里更适合用可循环的动画。
- 产品介绍需要元素按既定顺序依次出现、停顿再离场；这种多阶段编排更适合关键帧动画。
- 用户点击菜单项只是要打开另一个页面；页面跳转先用链接实现，不必为了跳转本身添加过渡。
练一练选一个答案，看看解释
你在做 AI 工具的侧边栏：点击图标后，面板从收起变为展开；点击同一图标又收回。你会怎样向 AI Agent 描述动效？
让 AI 帮你做复制给 AI Agent 直接用
请保留侧边栏现有的点击开关逻辑，为展开和收起的状态变化添加过渡。让面板的位置和透明度平滑变化，时长先设为约 200 毫秒；检查关闭后面板不会挡住主内容或接收点击，并兼顾减少动效的系统设置。