Transitions.dev 32款过渡动画实战指南:弹窗、下拉菜单、Toast该选哪一个?

【免费下载链接】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

Transitions.dev 是一个包含 32 款可移植过渡动画(CSS Transitions)的开源组件库,每一款都能一键复制到你的项目中使用——无需框架依赖、自带无障碍动效降级,从弹窗、下拉菜单到 Toast 通知,都有经过调校的现成方案。本文帮你快速判断:哪种 UI 场景该用哪一款过渡动画。

第一步:先问一句"这个动画服务什么交互"

选过渡动画最忌讳"先找个好看的动画再硬套"。官方技能包里内置了一套决策规则(Decision Rules):先看 UI 元素,再看动词。

• 浮层盖在整个页面上方→ 用Modal(弹窗)
• 从某个按钮/触发器长出来→ 用Menu Dropdown(下拉菜单)
• 自己出现、自己消失的提示条→ 用Toast

一句话口诀:必须打断用户就弹窗,锚在按钮上就下拉,不打扰用户就 Toast。🎯

Modal 弹窗:用户必须回应时才用

参考文件:06-modal.md

弹窗的动画是从中心以 0.96 的缩放比例放大进场,再配合透明度淡入;关闭时回落到 0.96 缩放。

关键调参(直接来自源码默认值):

注意这个开慢关快的不对称设计:打开 250ms 显得郑重,关闭 150ms 显得干脆。实现上只需在容器上加.t-modal类,打开时加.is-open,关闭时先换成.is-closing,动画结束后再清理掉。

什么时候选 Modal:删除确认、登录框、支付流程等"不处理就无法继续"的场景。

下拉菜单:从触发器"长出来"的原点感知动画

参考文件:05-menu-dropdown.md

下拉菜单和弹窗最大的区别:它是锚定在触发按钮上的,动画应该从按钮的位置"生长"出来。Transitions.dev 的下拉动画支持data-origin属性,可选 6 种原点方向(top-left、top-center、top-right、bottom-* 等),变换轴心会自动对准触发器,视觉上就像菜单从按钮里展开。

什么时候选 Dropdown:上下文菜单、用户头像菜单、筛选器 Popover——所有"贴着某个按钮展开"的浮层。

Toast:慢进场、快离场,纯 CSS 零 JS

参考文件:22-toast.md

Toast("已保存""已复制")是三者中实现成本最低的:它从底部边缘上浮进场,带淡入、轻微缩放和交叉模糊,而且——

这是 32 款过渡动画中少有的纯 CSS 方案,不需要任何 JS 编排,切换一个.is-open类就完事。

它的节奏设计很值得学:打开 350ms、关闭 250ms。进场稍慢显得"深思熟虑",离场较快显得"敏捷",用户几乎感觉不到等待。

Toast vs Modal 的分界线:界面会自己消失就选 Toast;用户必须回应才能继续就选 Modal。

一张表看懂:32 款过渡动画怎么选?

官方技能包把 32 款动画做成了速查表,完整清单见 SKILL.md。按场景分组挑重点:

官方还有一条重要的平局规则:当两个动画都适用时,优先选开销更小的(比如能用 Dropdown 就不用 Modal,能用 Card Resize 就不用 Panel Reveal),除非设计明确要求更重的界面。

上手方式:一条命令安装过渡动画

所有动画都可以通过 npm CLI 直接拉取,免费款无需账号:

npx transitions-dev add modal # 只装弹窗 npx transitions-dev add --free # 一次装齐全部免费过渡动画 npx transitions-dev list # 查看完整清单

CLI 源码见 cli/ 目录,每个动画都有对应的说明文档,如 cli/free/modal.md、cli/free/toast.md。

另外它还提供AI Agent 技能包(skills/transitions-dev/),安装后 AI 编码工具能直接在你的项目里按决策规则选动画、写代码,不用你手动复制。

避坑指南:三个最常见的翻车点

官方在 SKILL.md 的"Common mistakes"一节列了 12 条,新手最容易踩中这 3 个:

1. 删掉prefers-reduced-motion降级块——每个片段末尾都带这个无障碍守卫,删掉会导致动效敏感的用户(及无障碍审计)直接报警;
2. 忘记关闭后的类清理——Dropdown/Modal 关闭后要等setTimeout移除.is-closing,否则下次打开会从"关闭中的缩放"而非静止位置起步,动画跳变;
3. 把transition: …改成transition: all——所有片段都刻意枚举精确属性,防止无关样式变化"搭便车"产生诡异动画。

所有动画共用的运动变量(时长、缓动、距离、缩放、模糊)统一放在 _root.css,全局引入一次即可,后续调时间只需要改一个变量。

小结:30 秒记住这套选择逻辑

32 款过渡动画覆盖了弹窗、下拉菜单、Toast 之外几乎所有的常见交互,全部自带调校参数和降级守卫。按需取用,你的界面动效从今天起就有统一节奏。

【免费下载链接】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