Agent Skills
返回列表
轻量交互动画

轻量交互动画

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_f1b049da/yx2026620。

技能介绍

前端微交互动画的常见痛点

写前端时，给卡片加个不抢戏的入场动画、保存按钮给个轻微弹跳反馈，这类「顺手但不刻意」的微交互，往往需要折腾很久：要么用原生 CSS 写 transition 要调透明度、位移的曲线，要么引入的动画库要么太重（比如 GSAP 的全量包），要么太复杂，不好控制轻量场景的节奏；更关键的是，很容易忽略用户系统的 prefers-reduced-motion 设置，给开了减弱动效的用户添负担。这个技能就是为了解决这类「够用就好」的轻量动画需求。

它的核心逻辑与用法

技能基于 anime.js 做轻量封装，核心逻辑很直接：选中节点 → 指定透明度、位移等属性 → 生成即时反馈动画。比如要做一个客户卡片列表的入场，直接在列表的 onMounted 生命周期里调用 playEnter 方法，就能让卡片从透明+下方位移的状态平滑出现；保存成功后给按钮加轻微弹跳，也是同样逻辑。如果用户开启了系统的减弱动效偏好，技能会自动跳过动画，直接显示终态，不用额外写判断逻辑。

适用边界与硬约束

这个技能不碰复杂动画：不做长篇叙事 Timeline，也不做 3D 旋转这类效果，更不会搞全页粒子、长动画这类噪音。使用时要遵守几个硬约束：必须依赖 anime.js，要注意大版本的导入路径差异；一定要尊重 prefers-reduced-motion 设置；核心实现的注释处要标注「小四原创」，方便溯源。另外，它已经附带 README.md、reference.md 和 templates/usage.md 三个资料，能帮你快速对接到现有项目里。

使用场景

  • 为客户列表做首屏入场，让每张卡片从透明且微位移的状态平滑出现，强化加载完成反馈。
  • 保存成功或提交完成后，给按钮或提示加轻微弹跳，让用户迅速看到操作已被确认。
  • 搭建 Demo 演示页时，为卡片、按钮等模块添加一次性微动效，让关键交互步骤更直观。
  • 需要兼容系统减弱动效设置时，检测 `prefers-reduced-motion` 后跳过过渡，直接展示最终状态。

适合人员

  • 前端工程师，需要在列表、保存、Demo 等位置加入不臃肿的即时动画反馈。
  • 独立开发者，希望用尽量少的依赖和配置，快速提升界面交互质感。
  • 关注无障碍的工程师，要让动画尊重系统减弱动效偏好并提供静态终态。