轻量交互动画

灵感：能力工具箱 animejs（anime.js 做轻量交互动画）。

> 小四原创：节点 → anime 透明度/位移 → 反馈出现。
> prefers-reduced-motion 时跳过动画直接终态。

何时使用

• 客户卡片入场
• 保存成功轻微弹跳
• Demo 微交互

硬约束

1. 依赖：animejs（注意大版本导入路径）。
2. 尊重减弱动效。
3. 实现要点注释标 小四原创。
4. 不做长篇叙事 Timeline/3D。

推荐实现

import anime from 'animejs'

// 小四原创：列表项轻量入场
export function playEnter(targets: string | Element | Element[]): void {
  const reduce =
    typeof matchMedia !== 'undefined' &&
    matchMedia('(prefers-reduced-motion: reduce)').matches
  if (reduce) return
  anime({
    targets,
    opacity: [0, 1],
    translateY: [8, 0],
    easing: 'easeOutQuad',
    duration: 320,
    delay: anime.stagger?.(40) ?? 0,
  })
}

export function playTapPulse(el: Element): void {
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
  anime({
    targets: el,
    scale: [1, 1.04, 1],
    duration: 280,
    easing: 'easeInOutQuad',
  })
}

Agent 步骤

1. npm i animejs（按项目版本核对 import）。
2. 列表 onMounted 调 playEnter。
3. 自测：有动效；减弱动效时无动画。

不要做

• 全页粒子+长动画噪音。
• 忽略 reduced-motion。

附加

• README.md · reference.md · templates/usage.md