动画与过渡

界面的动效就像演员走位时的节奏感：太快了显得生硬突兀，太慢了又让人觉得卡顿拖沓。astryx-vue 的动效体系沿袭了 Astryx 的标准规范，旨在提供干脆、克制且符合物理规律的交互体验。

动画时长梯级（Duration）

动画时长基于 Neutral 预设的运动刻度计算而成。系统划定了三个基础参考档位：

• 快速交互（fast）： 125ms，适合开关、复选框点击、图标翻转等微小的即时反馈。
• 常规操作（medium）： 300ms，适合下拉菜单展开、卡片悬浮浮起等大多数界面过渡。
• 大型进出场（slow）： 700ms，适合大型全屏抽屉、模态弹窗的推入推出。

相邻档位之间按照约 0.75 的步长递增或递减，最终结果四舍五入精确到 5 毫秒，避免出现不规则的零碎时间。

缓动曲线（Easing）

整套设计系统只保留了一条最核心的标准缓动曲线：

• --astryx-ease-standard：数值为 cubic-bezier(0.24, 1, 0.4, 1)。

这是一条具有减速特征的曲线：起步迅速，在接近终点时平滑减速落定。

共享进出场关键帧

在 @astryx-vue/core 的 styles/motion.css 中，我们预制了一组通用的进入与退出 CSS 类名。只要你的项目引入了 @astryx-vue/core/styles.css 或者使用了带样式的组件，就可以在任何你自己的 HTML 元素或 Vue 过渡（<Transition>）中直接复用它们：

进场类名 / 出场类名	动画视觉效果
astryx-motion-fade-in / astryx-motion-fade-out	纯淡入 / 纯淡出
astryx-motion-scale-in / astryx-motion-scale-out	缩放轻微放大进场 / 缩小退场
astryx-motion-slide-in-above / out	从上方轻微滑入 / 向上滑出
astryx-motion-slide-in-below / out	从下方轻微滑入 / 向下滑出
astryx-motion-slide-in-start / out	从行起始侧（默认左侧）滑入 / 滑出
astryx-motion-slide-in-end / out	从行结束侧（默认右侧）滑入 / 滑出

位移距离和缩放比例分别由 --astryx-motion-offset 与 --astryx-motion-scale-from 变量控制。

关爱易眩晕用户：无障碍减少动效支持

如果用户在操作系统的辅助功能中开启了「减少动态效果（prefers-reduced-motion: reduce）」，astryx-vue 会自动做出安全响应：

• 所有位移距离和缩放比例自动归零。
• 透明度直接瞬间跳到最终可见状态。
• 通用共享类的过渡时间自动缩短为极微小的 0.01ms，彻底避免画面大幅晃动对晕动症或光敏感用户造成身体不适。

注意： 为了保证关键交互状态不发生破坏性错位，组件自身特定的内部时长 token 保持原值，无障碍规则主要通过限制大幅位移与缩放来保障体验。

动态效果预览

点击下方的重播按钮，可以实时观察不同动画档位的过渡节奏（如果你在系统设置里开启了减少动态效果，方块会直接停留在最终位置）：

时长

Neutral 的节奏比默认主题更快：fast 125ms，medium 300ms，slow 700ms，比例 0.75，再取整到 5ms。

--astryx-duration-fast-min

95ms

--astryx-duration-fast

125ms

--astryx-duration-fast-max

165ms

--astryx-duration-medium-min

225ms

--astryx-duration-medium

300ms

--astryx-duration-medium-max

400ms

--astryx-duration-slow-min

525ms

--astryx-duration-slow

700ms

--astryx-duration-slow-max

935ms

缓动

进入动画用这条减速曲线。

--astryx-ease-standard

cubic-bezier(0.24, 1, 0.4, 1)

动画

进入和退出各有淡入淡出、缩放，以及上、下、起始侧、结束侧四个方向的滑动。系统开启「减少动态效果」时，位移和缩放会收成 0，透明度直接落到结束状态。现有组件仍使用自己的动画名。

fadescaleabovebelowstartend

• astryx-fade-in
• astryx-fade-out
• astryx-scale-in
• astryx-scale-out
• astryx-slide-in-above
• astryx-slide-out-above
• astryx-slide-in-below
• astryx-slide-out-below
• astryx-slide-in-start
• astryx-slide-out-start
• astryx-slide-in-end
• astryx-slide-out-end