slot-text：零依赖的文字滚动动画库，为 Web UI 注入精致动效

📅 2026年06月16日 · 技术

小而美的文字动效库

slot-text 是一个零外部依赖的文本滚动动画库，专为 Web 应用中的小型 UI 标签设计。无论是 "Copy" 变成 "Copied"、状态切换还是数据刷新反馈，它都能以极简的方式为文字切换添加流畅的滚入滚出效果。

项目使用 TypeScript 编写，支持 React、Vue、Svelte、Solid 等主流框架，包体积极小（gzip 后仅几 KB），非常适合注重性能的前端项目。在 GitHub 上已获得近 700 Star。

核心 API

slot-text 提供了三个简单直观的方法：

• set(text, options?)：永久切换到新文本
• flash(text, options?)：临时显示新文本，然后自动恢复（如"已复制"→"复制"）
• destroy()：清理资源

特别值得一提的是 flash 方法——它内置了防抖机制：重复点击会重置恢复计时器而不会产生多余的动画队列，调用 set() 则会取消待执行的恢复操作。这种细节设计体现了对用户体验的深入思考。

框架集成

除了原生 JS 用法，slot-text 还提供了框架组件：

• React：<SlotText text="Copied" options={{ direction: "up" }} />
• Vue：通过 Composition API 无缝集成

开发者可以自由控制动画方向（上下滚动）和颜色，还内置了 chromatic() 调色函数，自动生成和谐的色彩方案。

适合谁用

如果你的项目中有大量的按钮状态切换、数据加载提示或交互反馈文字，slot-text 是一个非常轻量且优雅的解决方案。它不依赖任何动画框架，与现有项目集成零摩擦，是一个典型的"小切口、深价值"的前端工具库。

参考来源

• slot-text — GitHub