01 功能说明
了解菜单、弹窗、文字及控件的 CSS 过渡方案，包含语义化变量、状态钩子与重复交互检查。
transitions-dev 提供便于迁移的 CSS 过渡方案，使用带命名空间的选择器和语义化动效变量。它将可见组件匹配到对应方案，例如以触发器为锚点的下拉菜单、弹窗、变化文字或滑动标签指示器。实现时，需要把文档中的状态钩子连接到应用实际行为。
该 Skill 还提供审查与优化流程。审查只定位可应用的位置，不修改代码；优化则根据语义将零散参数映射到变量。关闭动画应因其用途匹配关闭时长变量，而不是因为现有数值恰好接近。
预期交付物
检查元素及状态变化。区分锚定菜单和居中弹窗，以及文字替换和页面移动。
只引入一次共享变量块，或仅使用所选方案的变量。保留关闭后的清理、重播处理及所需 JavaScript 编排。
打开、关闭并重新打开组件。检查减少动态效果分支，验证由变量驱动的时长与清理逻辑保持同步。
02 适用场景
提供组件标记、样式、状态处理和已有动效变量。采用方案前，先按预期用途审阅自定义许可；再分发与模板用途有特别条件。
03 关键决策
带名称的时长与距离表达组件如何运动。
源文档倾向针对性修改，避免引入通用动效库。
清理与重播规则处理只在第二次交互时出现的故障。
04 示例任务
以下示例任务说明尚未经过测试。使用前请检查该技能的设置。
提供相关标记、样式与状态实现。
https://github.com/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/SKILL.md下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求；这不是安装命令。
运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。
使用 transitions-dev 改善我现有应用中的账户下拉菜单。选择方案前，检查触发器、菜单状态与当前 CSS。让菜单从触发器位置展开，保留项目的键盘和焦点行为，并使用语义化动效变量，不要重复已有的根变量块。检查快速打开—关闭—再打开的交互，确认关闭状态类已清理。保留减少动态效果分支与明暗主题。返回针对性修改，解释连接了哪些状态钩子；不要重新设计菜单内容或无关组件。根据以下可观察标准检查实际输出。
OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置，也不表示其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。
e3aefb554d8f为具体组件应用 CSS 过渡效果与语义化动效变量。
由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/SKILL.md