尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
Transitions.dev Polish 技能详解:如何把手写动画一键对齐动效令牌刻度
Transitions.dev Polish 技能详解如何把手写动画一键对齐动效令牌刻度【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.devTransitions.dev 的Polish 技能transitions-polish是一套专门打磨已有动效的 AI 编程技能它不新增动画而是扫描你项目里手写 CSS 的时长、距离、缩放、模糊、缓动五个维度把每个值对齐到 transitions.dev 的**动效令牌motion tokens**刻度上让散乱的300ms、cubic-bezier(...)变成统一可维护的var(--…)。它解决什么问题告别手感式调参大多数项目的动画都是手感式写出来的弹窗关闭用了300ms下拉菜单打开用了250ms某个图标切换又随手写了个cubic-bezier(0.22, 1, 0.36, 1)。单看都没错合在一起却节奏不统一、时快时慢用户会隐约觉得哪里不太顺却说不上来。Polish 技能的核心理念是按用法匹配而不是按最接近的数字匹配。一个300ms的弹窗关闭不该因为300 接近 350就换成--duration-medium而应该看它在做弹窗关闭这件事——对应的令牌是--duration-quick150ms。如果某个值对不上任何令牌的用途它就原样保留绝不硬凑。动效令牌五维刻度一览Polish 技能内置了一张和 transitions.dev 站点Motion tokens页一致的令牌表集中在_root.css里。把这些令牌复制到项目后任意位置都能用var(--…)引用。五大维度如下维度令牌示例含义时长 Duration--duration-quick150ms /--duration-fast250ms关闭用快、打开用慢缓动 Easing--ease-smooth-out表面类动效的默认曲线距离 Distance--distance-base8px平移多远才顺眼缩放 Scale--scale-large0.96大表面从更远处起步模糊 Blur--blur-medium3px给切换/滑动柔化关键规则值到底对不对由规则判定开/关不对称打开是邀请、关闭要让路。下拉/弹窗开 250ms → 关 150ms面板开 400ms → 关 350ms。页面滑动、标签切换、手风琴这类单一可逆动作则保持对称不要拆。悬停进 vs 出进要快而直接出可以软而有弹头像回位用--ease-bounce-strong。间隔与延迟每项目--duration-stagger40ms但总间隔要压在约 300ms 以内延迟只用来过滤误触 / 制造节奏永远不要延迟关闭或悬停移出。两个命令review 只报告polish 才落盘技能暴露了带命名空间的两个动词都以transitions开头避免与其他技能冲突完整说明见 SKILL.mdtransitions review扫描全项目含内联style、styled-components、Tailwind 任意值按文件输出应该改的值清单不改动任何代码。结尾提示运行transitions polish应用这些改动。transitions polish先复述 review 的扫描展示多少值会改、按文件分组 一条示例请求你确认后才把硬编码值替换成var(--…)引用保持 diff 尽量小。和 Refine 面板的联动单击即得令牌化建议当项目里装了 Polish 技能transitions.dev 的Refine 面板会自动把这些规则内联进每次Small refinement作业的提示词中做到零额外文件读取。面板细节见 refine/README.mdSmall refinements小打磨保留原过渡只按动效令牌给微调建议——正是 Polish 技能的场景Replace transition整段替换从库里换一整套过渡属于transitions-dev技能的地盘。上手三步把技能安装进项目与transitions-dev一起装或单独装令牌值已自述可独立审查导入一次_root.css令牌块让var(--…)生效运行transitions review先看清楚再transitions polish一键对齐。 小贴士transitions-dev的片段本身就带字面值不装令牌也能跑装上 Polish 技能后它们会被映射回共享刻度未来调参改一处即可。小结Polish 技能把让动画更顺这件靠手感的事变成一套可审查、可复现、可一键应用的令牌化流程按用法匹配令牌、遵守开/关不对称与悬停进出规则、用 review 和 polish 两步安全落盘。对新手来说它几乎是最快把散落 CSS 过渡驯服成统一动效体系的方式。更多可参考的目录skills/transitions-polish/、skills/transitions-dev/ 与 refine/。【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.dev创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

车载AUTOSAR单元测试环境配置:ParaSoft+BDF实战指南

车载AUTOSAR单元测试环境配置:ParaSoft+BDF实战指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/10/3 1:01:30
LLC谐振变流器大电流设计实战:增益曲线、同步整流与样机调试

LLC谐振变流器大电流设计实战:增益曲线、同步整流与样机调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/10/3 1:01:30
基于PIC18LF46K22与DRV8818的双极步进电机驱动设计与实现

基于PIC18LF46K22与DRV8818的双极步进电机驱动设计与实现

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/10/3 1:01:30
MORE NEWS

更多资讯

📰

提示工程+LoRA微调:让大模型生成可直接进CI的Java单元测试

1. 项目概述1.1 为什么想做这个项目说实话,让大语言模型帮你写单元测试用例这件事,听起来很爽,但真正做起来全是细节。我在维护一个中大型Java服务时,每天最烦的就是写那些重复的测试代码:构造函数塞参数、Mock依赖、断…

📰

Windows装Redis全攻略:从MSI安装到配置调优与故障排查

Windows装Redis这件事,我前前后后折腾了不下十次,很多坑都是血泪教训。最典型的一幕是:新同事照着某些“教程”去Redis官网下载Windows安装包,结果官网根本没有Windows版,当场傻眼。后来我帮他用社区维护的MSI包装上了…

📰

西储大学轴承数据集故障诊断平台(Windows本地版)

简介:本资源是一款基于西储大学轴承数据集开发的故障诊断仿真平台,面向机械故障诊断、信号处理与智能运维方向的初学者及高校科研人员,提供从数据加载、特征提取到模型训练与实时诊断的完整实践流程。压缩包共31个文件,含11个Pyth…

📰

MuJoCo+PPO实战:Ant/Hopper/Humanoid稳定训练全指南

简介:本资源是一份基于PyTorch实现的近端策略优化(PPO)强化学习算法代码包,专为MuJoCo物理仿真环境中的经典控制任务设计,适用于强化学习初学者与进阶研究者开展算法复现、超参调优及策略训练实践。资源包含13个文件&a…

📰

BoXueGu压缩包项目实战:从解压到新功能验证的完整指南

简介:本资源面向Android初学者与进阶开发者,在原有博学谷项目基础上新增圆形头像、欢迎界面倒计时、找回密码后自动跳转、签到、更换头像五个实用功能,适合用于课程设计、毕业设计或Android技能巩固练习。压缩包共383个文件,约45.…

📰

JavaCC实战:完整构建类C编译器课设,从词法分析到栈帧可视化

简介:该资源为重庆理工大学编译原理课程设计完整项目,面向学习JavaCC与类C语言编译器实现的本科生,可用于课程设计、期末复习或实验参考。项目基于JavaCC完成类C语言编译器的词法分析、语法分析及语义处理,采用递归下降方法实现语…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬