用途:为 Web 应用提供开箱即用的 CSS 过渡效果,覆盖通知徽章、下拉菜单、模态框、面板展开、页面切换、卡片尺寸变化等常见界面动效。
主要能力:包含 32 个过渡片段,如卡片尺寸变化、数字弹入、通知徽章、文本状态切换、菜单下拉、模态框、面板展开、页面并排切换、图标切换、成功勾选、头像组悬停、错误抖动、输入清空溶解、骨架屏加载与揭示、微光文字、标签滑动、工具提示、文本揭示、卡片悬停倾斜、加号变菜单、手风琴展开、Toast、点赞按钮、了解更多悬停、复选框勾选、旋转计数器、开关、思考状态、推理流、流式文本、矩阵点加载器、横幅堆叠、文本变形、文本柔和替换、环形图等。每个片段以 t-* 选择器命名,使用语义化 CSS 自定义属性,无框架依赖,并自带 prefers-reduced-motion 保护。
使用方式:将 _root.css 复制到项目并导入,或把其 :root 块粘贴到全局样式表;也可只安装单个过渡所需的变量块。粘贴所选过渡的 CSS 原文,接入文档中的 HTML 钩子(类名如 .t-dropdown、.t-modal 等,状态属性如 data-open、data-state 等),保留 prefers-reduced-motion 块。部分过渡需要少量 JS 编排。技能还提供 transitions reveal、transitions review、transitions apply、transitions refine 四个命令,用于列出、审查、安装和优化过渡。
适用场景:需要为界面元素添加一致、可调、无障碍友好的动效时使用。
限制:资料未提供具体安装命令、包管理器信息、浏览器兼容范围、性能数据或收费信息;部分过渡依赖 JS 编排,具体实现细节需参考对应参考文件。