shadcn-hub
HomeOfficial Components64Live GalleryLive
Design Tools
/
Star on GitHub
shadcn-hub100% Strictly Implemented
Visitor Analytics
|
Site Visitor Counter
Star on GitHubMIT License

Transitions.dev

页面过渡库

Overview

Overview

Transitions

Container Morphing
Spring
Stagger Cascade
Cascade

Transitions.dev · 容器展开与平滑变形 (Morphing)

抓取自 transitions.dev 的物理弹簧位移、滑动胶囊与平滑几何形态变形

Effect 1: Spring Tab Capsule 弹簧滑块选项卡

选中态的背景指示胶囊在不同 Tab 之间平滑穿梭位移

点击不同选项卡观察背景胶囊的平滑物理滑动:

当前激活状态:全部项目

Effect 2: Expandable Card 原地几何形变卡片

点击由紧凑卡片平滑舒展为完整详情面板

TR

微服务架构重构提案

更新于 10 分钟前

本案旨在解耦当前单体结构,引入基于 Next.js 16 与边缘网关的自适应弹性服务。 首期试点计划包含用户身份鉴权中心与实时数据看板。

Effect 3: Text Swap 原地文本平滑置换与宽度形变

按钮文本状态切换时,容器宽度伴随物理弹簧平滑扩展,文字垂直滑入滑出

点击上方按钮观察内部文字垂直滑动置换与按钮外框弹性伸缩

Effect 4: Status Badge Morphing 状态胶囊形态演变

多状态流转时的无缝背景色差渐变与图标平滑淡入

Step 1: 静态资源打包中...

点击胶囊切换并观察三种状态间的无缝平滑形变与微光波纹