state-changes

状态变化动画

将迪士尼的 12 条原则应用于不会离开的元素变换。

原则应用

挤压与拉伸：元素在扩展前先压缩。切换开关滑动前先挤压 5%。

预备动作：变化前先蓄势。扩展前稍微反向移动（2-3px）。

舞台设计：让变换始终围绕用户的关注点进行。不要让状态变化分散用户对交互位置的注意力。

连续动作与关键帧动作：定义精确状态。按钮有静止、悬停、激活、禁用四种状态，每种都经过精确设计。

跟随与重叠动作：各部分以不同速率变换。图标旋转后，标签再淡入。

慢入慢出：双向变化使用 ease-in-out：cubic-bezier(0.4, 0, 0.2, 1)。

弧线运动：旋转元素沿自然弧线移动。箭头围绕自身中心点旋转，而非线性移动。

次要动作：将主要变化与辅助动作结合。切换开关滑动 + 颜色变化 + 图标切换。

时长：

• 微状态：100-150ms（复选框勾选、单选按钮填充）
• 标准状态：150-250ms（切换开关、折叠面板）
• 复杂状态：250-400ms（多部分变换）

夸张：状态变化时略微过冲。切换开关多移动 2px，然后回到稳定位置。

扎实绘图：变换过程中保持元素完整。不要进行破坏视觉一致性的扭曲。

感染力：状态变化应让人感到愉悦。用户是有意点击的——应让他们的操作获得回馈。

时长建议

状态变化	时长	缓动	备注
复选框	150ms	ease-out	勾选线条逐渐绘出
切换开关	200ms	ease-in-out	略微过冲
单选按钮	150ms	ease-out	从中心缩放展开
折叠面板	250ms	ease-in-out	高度 + 旋转
标签页切换	200ms	ease-in-out	指示器滑动
按钮激活	100ms	ease-out	缩放至 0.97
卡片展开	300ms	ease-in-out	所有属性同步变化

实现模式

.toggle {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-knob {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot */
}

.toggle.active .toggle-knob {
  transform: translateX(20px);
}

折叠面板模式

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-in-out;
}

.accordion.open .accordion-content {
  grid-template-rows: 1fr;
}

关键规则

状态变化是可逆的。从状态 A 变为状态 B 的动画应与反向动画互为逆过程。请测试两个方向。