transitions-dev

Transitions.dev

内置 21 款开箱即用的 CSS 过渡动效，均采用 t-* 选择器命名空间隔离，并基于语义化的 CSS 自定义属性构建。即插即用：直接复制代码片段、绑定文档中说明的 HTML 结构钩子即可完成配置。无任何框架依赖，不含冗余示例代码，且每个动效均内置 prefers-reduced-motion 减弱动画偏好兼容保护。

快速参考

过渡动画	适用场景	参考文档
卡片尺寸调整	容器布局状态变更时平滑过渡其宽度或高度。	01-card-resize.md
数字弹出	数值更新时，每个数字带模糊滑入效果重新进场。	02-number-pop-in.md
通知徽章	徽章滑入触发元素，并以弹跳效果显现小红点。	03-notification-badge.md
文本状态切换	文本在原位以上下滑动 + 高斯模糊的过渡效果原地切换。	04-text-states-swap.md
下拉菜单	打开从触发位置感应展开的下拉菜单。	05-menu-dropdown.md
弹窗打开/关闭	弹窗对话框以放大方式打开，关闭时以柔和缩小效果淡出。	06-modal.md
面板展开	面板伴随交叉模糊平滑滑入页面指定区域。	07-panel-reveal.md
双页并行/平移	两个并列页面间平滑滑动切换（如：列表 ↔ 详情、步骤 1 ↔ 步骤 2）。	08-page-side-by-side.md
图标切换	同一槽位中的两个图标伴随模糊与缩放淡入淡出交替。	09-icon-swap.md
成功勾选	组合淡入 + 旋转 + 垂直轻跳 + 描边绘制，反馈操作完成瞬间。	10-success-check.md
头像组悬停	悬停单行元素时产生距离衰减浮起效果，复位时带有弹簧回弹。	11-avatar-group-hover.md
错误抖动反馈	分段贝塞尔曲线左右抖动，边框和错误提示信息会在完成后自动复原。	12-error-state-shake.md
输入框清空溶解	清空文本框内容时，触发飞出+逐字残影溶解效果。	13-input-clear-dissolve.md
骨架屏加载与展示	占位图呼吸闪烁，加载完成后交叉淡入 + 模糊过渡到真实内容。	14-skeleton-reveal.md
微光流光文本	在暗色/柔和文本上循环扫过一道高光带（纯 CSS 实现）。	15-shimmer-text.md
Tab 标签平移滑动	在分段控件中，当前选中的高亮胶囊块在选项间平滑滑动。	16-tabs-sliding.md
气泡提示显示/隐藏	延时淡入 + 放大显现，移出时瞬时消失（纯 CSS 实现）。	17-tooltip.md
文本层叠渐显	多行文本错峰上升并由模糊转清晰，淡出时柔和无声。	18-texts-reveal.md
卡片悬停 3D 倾斜	卡片随着指针悬停位置进行 3D 倾斜，并伴随鼠标光晕跟随效果。	19-card-tilt.md
加号变菜单变形动画	将圆形触发按钮直接形变为其所展开的菜单或面板。	20-plus-menu-morph.md
折叠面板展开	利用 CSS Grid (grid-template-rows) 平滑展开/收起面板，并伴随箭头翻转。	21-accordion.md
Toast 轻提示显隐	Toast 从底部升起，伴随淡入 + 交叉模糊，进场平缓、离场迅速。	22-toast.md
点赞按钮动画	点赞时爱心缩放放大填充，并爆发粒子散开效果。	23-like-button.md
“了解更多”悬停动效	鼠标悬停时右箭头滑动并张开变长。	24-learn-more-hover.md
复选框选中动画	先填充选框背景，随后动态绘制勾选路径。	25-checkbox-check.md
老虎机翻页数字计数器	如老虎机轮盘般旋转数字滚轮，伴随垂直方向动态模糊。	26-spinning-counter.md
开关切换动画	滑块平移时带有双重回弹过冲效果。	27-toggle.md

匹配决策规则

当用户提出动画需求时，优先匹配可见的 UI 元素类型，其次匹配动作动词：

• 触发元素 + 上方浮动小红点 → 通知徽章（notification badge）。
• 触发元素 + 从中展开的图层 → 下拉菜单 dropdown（挂载锚点、感知源位置）或 弹窗模态框 modal（居中显示、无锚点）。
• 滑入页面特定区域的面板图层 → 面板展开（panel reveal）。
• 双屏/双界面平移，如：列表 ↔ 详情、步骤 1 ↔ 步骤 2 → 双页并行/平移（page side-by-side）。
• 元素宽高发生变更 → 卡片尺寸调整（card resize）。
• 元素内部的文本内容原地更新 → 文本状态切换（text states swap）。
• 同一位置上两个图标交替 → 图标切换（icon swap）。
• 数值发生变化 → 数字弹出（number pop-in）。
• 确认 / 成功 / “已完成” 节点（如勾选图标、支付成功、文件上传完毕） → 成功勾选（success check）。
• 鼠标悬停在水平排列的一排元素上（如头像组、标签纸片、分段按钮、Tag 标签） → 头像组悬停（avatar group hover）。
• 表单校验报错 / “输入有误” 反馈（如无效输入框、PIN 码错误、名称重复） → 错误抖动反馈（error state shake）。
• 清空文本框内容（如搜索框 × 清除按钮、筛选重置） → 输入框清空溶解（input clear with dissolve）。
• 先显示占位图、后淡入切换为真实内容（如列表行、卡片、个人信息头部） → 骨架屏加载与展示（skeleton loader and reveal）。
• “进行中 / 处理中”需要呈现灵动感的文本（如加载中文案、流式输出状态） → 微光流光文本（shimmer text）。
• 包含滑动高亮指示块的水平互斥选项组（如视图切换器、分段控件、筛选 Tab） → Tab 标签平移滑动（tabs sliding）。
• 悬停/聚焦在触发元素上弹出的提示气泡（如图标 Tooltip、信息气泡） → 气泡提示显示/隐藏（tooltip open / close）。
• 主标题 + 副标题等层叠文案有节奏地入场（如 Hero 区域文案、空状态提示、引导步骤） → 文本层叠渐显（texts reveal）。
• 悬停时随着鼠标指针产生 3D 互动响应的卡片（如商品卡片、封面图、会员卡，带/不带光晕效果） → 卡片悬停 3D 倾斜（card hover tilt）。
• 圆形触发按钮直接形变为其展开的图层（如加号 FAB 按钮展开为菜单/面板、撰写按钮拉伸扩展） → 加号变菜单变形动画（plus → menu morph）。若该图层是独立浮层且仅是从触发点膨胀弹出，请改用下拉菜单（menu dropdown）。
• 带可折叠主体、高度可展开/收起的标题头（如设置分组、常见问题 FAQ、筛选面板、“展开更多”、折叠组件） → 折叠面板展开（accordion expand）。
• 无明确匹配项 → 降级使用 transitions reveal 列出清单供用户自行选择，不要强行瞎猜。

如果有两个过渡效果同时适用，除非设计稿明确要求更重的视觉组件，否则优先选择轻量方案（如：优先卡片尺寸调整而非面板展开、优先下拉菜单而非全屏弹窗、优先成功勾选而非全屏弹窗庆祝动画）。成功勾选仅包含动画效果 —— 如果还需要从 Loading 加载圈切换到勾选图标，请将其与**图标切换（icon swap）**配合使用。

指令列表

除了直接的动画请求外，本 Skill 还要识别四个带有命名空间前缀的指令。每个命令均以 transitions 开头，避免与同项目中安装的其他 Skill 指令发生命名冲突。

transitions reveal — 列出所有过渡动效

触发短语： transitions reveal、“显示所有过渡动效”、“列出所有动画”、“这个 skill 有哪些过渡动画”、“展示动效目录”。

执行行为： 以带编号的纯文本列表形式输出 21 个过渡动画 —— 包含名称、单行功能简介及对应的参考文件名。直接复用上方 ## 快速参考 中的表格行内容，请勿自行编造文案。此操作无需读取项目代码。

transitions review — 审查项目动画契合点

触发短语： transitions review、“审查我的项目”、“检查项目里的动画”、“项目里哪里可以用 transitions.dev”、“寻找适合这个 skill 的地方”。

执行行为：

1. 检索工作区中的关键迹象：transition: 声明、@keyframes、样式文件中硬编码的 ms / s 时长，以及符合决策规则模式的组件（如弹窗、下拉菜单、徽章、搜索输入框、骨架屏、Tab 标签页、Tooltip 气泡提示等）。
2. 针对每个匹配点，结合决策规则评估并匹配出最契合的一款过渡动效。
3. 输出按文件分组的编号列表：
   • path/to/Component.tsx:L42 — 看起来是下拉菜单展开，建议使用 menu-dropdown (05-menu-dropdown.md)。
   • 跳过已使用 t-* 命名空间类名的过渡动画。
4. 切勿直接修改任何代码。末尾输出：“在任意行运行 transitions apply 即可应用推荐的过渡动画。”

transitions apply — 应用最契合的过渡动画

触发短语： transitions apply、“在这里应用过渡动画”、“添加合适的动画”、“在这里安装 transitions-dev”、“修复这个元素的动画”。

执行行为：

1. 读取上下文：当前打开的文件、离光标最近的元素以及周边的 CSS / JSX。若用户显式指定了过渡动效名称（例如 transitions apply menu-dropdown），则直接使用该指定动效。
2. 基于该上下文运行 ## 匹配决策规则，精确挑选出 一款 过渡动画。若有两款皆适用，优先选用开销较低的方案（遵循相同的仲裁规则）。
3. 给出单行确认提议：“建议在此处应用 menu-dropdown，因为该元素挂载于触发点并向外展开。确认是否安装？”
4. 用户确认后，严格按 ## 输出格式 中的五步流程执行（根变量块、代码片段、HTML 钩子、减弱动画兼容保护，以及必要的 JS 编排逻辑）。
5. 若无法确定唯一最佳动效，则降级执行 transitions reveal 并请用户手动挑选。

transitions refine — 使用动效 token 重构自定义动画

触发短语： transitions refine、“优化我的过渡动画”、“扫描临时/硬编码动画”、“将硬编码时长替换为动效 token”、“动效 token 化”、“微调时长/贝塞尔曲线”、“审查自定义 keyframes”、“统一动画节奏”、“对齐动效 token”。

执行行为：

1. 扫描全项目（不仅限于独立样式表，还包含内联 style=、CSS-in-JS、styled-components、<style> 标签块，以及 Tailwind 任意值如 duration-[300ms]）中的自定义动效：包括 transition / animation 简写与单项属性、自定义 @keyframes 动画块、硬编码时长（…ms / …s）、缓动曲线（cubic-bezier(...) 或预设关键字）、平移距离（px）、scale(...) 缩放值以及 blur(...) 模糊度。
2. 结合周围的选择器/组件上下文以及 ## 匹配决策规则，推断出每个动画的具体用途（如弹窗关闭、下拉菜单打开、Tooltip 显示、徽章显现、文本展开、页面滑动、震动抖动等）。针对 @keyframes 块，分析调用它的 animation 规则并判定 keyframes 本身的时长与缓动效果。
3. 决策的核心依据在于“实际用途”，而非“原始数值”。 在 ## 动效 token 表中查找推断出的用途，仅当场景用途一致时，才推荐对应的 token。例如：300ms 的弹窗关闭动画应映射到 --duration-quick，因为两者的适用场景都是“弹窗关闭”，哪怕具体毫秒数值不同。若某个数值的用途未能匹配任何 token