Transitions

资源与访问条件

• 已收录的参考资源

  Web · 组件代码 · React / Next.js、HTML / CSS / JS · 未确认

  • saved · 2026-10-13：已收录的官网用途说明与标签：提供卡片、菜单、弹窗与状态变化等可复制的 UI 过渡效果。

“有免费资源”仅描述对应资源范围，不代表每条案例、模板或素材免费。代码、提示词与素材的实际获取权限及许可需到原站核对。

目录入口

共 44 条记录，本页显示 1–44 条。每页最多 80 条；直接点击名称进入已保存的真实网址。

条目类型、来源日期与链接性质分别标注。只有明确核验过的画面才显示布局或风格标签；没有标签表示当前没有相应确认信息。

1. Transitions · UI 过渡组件库

   集合 · 集合或类目入口，非独立案例 · 交互过渡

   相关词：Transitions、UI 过渡组件库、交互过渡

   官网公开导航与用途说明2026-10-13

2. Card resize

   组件示例 · 具体条目入口

   相关词：卡片

   发布者公开目录数据2026-10-14

3. Number pop-in

   效果示例 · 具体条目入口

   相关词：模糊、翻转、交错、逐个出现

   发布者公开目录数据2026-10-14

4. Notification badge

   组件示例 · 具体条目入口

   相关词：徽章、状态标签、通知、消息提示

   发布者公开目录数据2026-10-14

5. Text states swap

   效果示例 · 具体条目入口

   相关词：模糊、文字、文本

   发布者公开目录数据2026-10-14

6. Menu dropdown

   组件示例 · 具体条目入口

   相关词：菜单、下拉菜单、关闭

   发布者公开目录数据2026-10-14

7. Confetti burst

   效果示例 · 具体条目入口

   相关词：按钮、彩纸、庆祝

   发布者公开目录数据2026-10-14

8. Modal open/close

   组件示例 · 具体条目入口

   相关词：弹窗、对话框、模态框、关闭

   发布者公开目录数据2026-10-14

9. Panel reveal

   效果示例 · 具体条目入口

   相关词：揭示、出现、入场、关闭

   发布者公开目录数据2026-10-14

10. Gooey plus menu

    组件示例 · 具体条目入口

    相关词：菜单、液态、融合、形变、添加、加号

    发布者公开目录数据2026-10-14

11. Page side-by-side

    效果示例 · 具体条目入口

    发布者公开目录数据2026-10-14

12. Icon swap

    组件示例 · 具体条目入口

    相关词：模糊、图标

    发布者公开目录数据2026-10-14

13. Success check

    效果示例 · 具体条目入口

    相关词：模糊、勾选、成功

    发布者公开目录数据2026-10-14

14. Avatar group hover

    组件示例 · 具体条目入口

    相关词：头像、悬停、鼠标悬停

    发布者公开目录数据2026-10-14

15. Card stack hover

    组件示例 · 具体条目入口

    相关词：卡片、悬停、鼠标悬停

    发布者公开目录数据2026-10-14

16. Error state shake

    效果示例 · 具体条目入口

    发布者公开目录数据2026-10-14

17. Input clear with dissolve

    组件示例 · 具体条目入口

    相关词：输入框

    发布者公开目录数据2026-10-14

18. Skeleton loader and reveal

    组件示例 · 具体条目入口

    相关词：骨架屏、加载、加载动画、揭示、出现、入场、淡入、淡出

    发布者公开目录数据2026-10-14

19. Texts reveal

    效果示例 · 具体条目入口

    相关词：揭示、出现、入场、交错、逐个出现

    发布者公开目录数据2026-10-14

20. Tabs sliding

    组件示例 · 具体条目入口

    相关词：标签页、选项卡

    发布者公开目录数据2026-10-14

21. Drag & drop with physics

    效果示例 · 具体条目入口

    相关词：拖拽、拖动、图片

    发布者公开目录数据2026-10-14

22. Shimmer text

    效果示例 · 具体条目入口

    相关词：流光、闪烁、渐变、文字、文本

    发布者公开目录数据2026-10-14

23. Organic shimmer

    效果示例 · 具体条目入口

    相关词：发光、光晕、流光、闪烁

    发布者公开目录数据2026-10-14

24. Tooltip open/close

    组件示例 · 具体条目入口

    相关词：提示、气泡、工具提示、关闭

    发布者公开目录数据2026-10-14

25. 3D tilt

    效果示例 · 具体条目入口

    相关词：反光、高光、光标、鼠标、指针、三维、3D

    发布者公开目录数据2026-10-14

26. Dropdown menu morph

    组件示例 · 具体条目入口

    相关词：按钮、菜单、下拉菜单

    发布者公开目录数据2026-10-14

27. Accordion

    组件示例 · 具体条目入口

    相关词：手风琴、折叠面板、网格

    发布者公开目录数据2026-10-14

28. Toast open/close

    组件示例 · 具体条目入口

    相关词：消息提示、轻提示、淡入、淡出、模糊、关闭

    发布者公开目录数据2026-10-14

29. Like button

    组件示例 · 具体条目入口

    相关词：按钮、粒子、爱心

    发布者公开目录数据2026-10-14

30. Image open tilt

    组件示例 · 具体条目入口

    相关词：三维、3D、图片

    发布者公开目录数据2026-10-14

31. Learn more hover

    效果示例 · 具体条目入口

    相关词：悬停、鼠标悬停

    发布者公开目录数据2026-10-14

32. Checkbox check

    组件示例 · 具体条目入口

    相关词：复选框、多选框、勾选、成功

    发布者公开目录数据2026-10-14

33. Spinner to check morph

    组件示例 · 具体条目入口

    相关词：加载、转圈、勾选、成功

    发布者公开目录数据2026-10-14

34. Spinning counter

    效果示例 · 具体条目入口

    发布者公开目录数据2026-10-14

35. Toggle

    组件示例 · 具体条目入口

    相关词：切换、开关

    发布者公开目录数据2026-10-14

36. Pro gradient text

    效果示例 · 具体条目入口

    相关词：渐变、文字、文本

    发布者公开目录数据2026-10-14

37. Delete with smoky dissolve

    效果示例 · 具体条目入口

    相关词：图片

    发布者公开目录数据2026-10-14

38. Thinking states

    组件示例 · 具体条目入口

    相关词：折线、线条、思考状态

    发布者公开目录数据2026-10-14

39. Reasoning stream

    组件示例 · 具体条目入口

    相关词：智能体

    发布者公开目录数据2026-10-14

40. Streaming text

    组件示例 · 具体条目入口

    相关词：模糊、文字、文本、流式输出

    发布者公开目录数据2026-10-14

41. Matrix dot loader

    组件示例 · 具体条目入口

    相关词：加载、加载动画

    发布者公开目录数据2026-10-14

42. Banner stacking

    效果示例 · 具体条目入口

    发布者公开目录数据2026-10-14

43. Image generation placeholder

    组件示例 · 具体条目入口

    相关词：图片

    发布者公开目录数据2026-10-14

44. Get Pro button

    组件示例 · 具体条目入口

    相关词：按钮、渐变

    发布者公开目录数据2026-10-14