轻量级文字翻转动画库：几行代码搞定「复制成功」这类微交互

昆仑开源易选

2026-06-15 0 4

你是否曾为按钮上「复制 → 已复制 → 复制」这类短时文字切换效果反复写 CSS 动画、管理状态、处理还原逻辑？slot-text 就是为此而生的极简工具——它不依赖任何框架或运行时，仅 1.8KB（Gzipped），却原生支持 Vanilla JS、React、Vue、Svelte、Solid 等主流前端生态，让你用一行 label.flash("已粘贴") 就实现丝滑、有质感的文字“翻牌式”动画。

核心功能

零依赖运行：纯 TypeScript 编写，无第三方依赖，不引入 React/Vue 运行时，兼容 ESM/CJS/UMD，直接在浏览器中开箱即用
双模式文本切换：支持 set()（永久切换）和 flash()（自动回滚）两种语义化操作，完美匹配「加载中」「操作成功」等场景
细腻的动效控制：内置字符级滚动动画，支持自定义入场/出场颜色（如渐变色、主题色）、持续时间、缓动函数，甚至可调用 chromatic() 自动生成协调色系
全框架友好封装：不仅提供基础 DOM API，还为 React（Hook）、Vue（Composition API 指令）、Svelte（Action）、Solid（Store 绑定）分别提供了开箱即用的适配层
极致轻量 & 高性能：Bundle 体积仅 1.8KB（min+gzip），动画基于 CSS transform 和 will-change 优化，全程不触发重排，60fps 流畅运行
安全可销毁：提供 destroy() 方法，自动清理事件监听与定时器，避免内存泄漏，特别适合动态组件或单页应用中频繁挂载/卸载的场景

适合哪些人用

如果你是前端开发者，正在构建注重细节体验的产品界面——比如设计系统中的按钮标签、后台管理系统的操作反馈、内容平台的点赞/收藏文案、或是需要快速验证原型交互动效的设计师协作项目，那么 slot-text 正是为你准备的「微交互加速器」。它不追求炫技，而是把「让文字动得恰到好处」这件事做到足够简单、可靠、可维护。尤其推荐给重视包体积、强调首屏性能、或需统一多框架 UI 动效规范的团队。

快速上手

安装只需一条命令：

npm install slot-text

在项目中使用（以 Vanilla JS 为例）：

import "slot-text/style.css"; // 全局样式只需导入一次
import { slotText } from "slot-text";

const copyBtn = document.querySelector("#copy-btn");
const label = slotText(copyBtn, "复制"); // 绑定初始文案

// 点击后闪现“已复制”，1.2 秒后自动切回“复制”
copyBtn.addEventListener("click", () => {
  label.flash("已复制", { duration: 1200 });
});

React 用户可直接使用 useSlotText Hook，Vue 用户可用 v-slot-text 指令——所有框架用法均在文档中有清晰示例，5 分钟内即可集成进现有项目。