技能介绍

它解决什么问题

在保存成功、跟进打卡成功这类轻量成功场景里，用户需要一点反馈，但又不想被礼花、全屏 modal 或遮罩打断。常见做法会盖住页面、抢焦点，甚至挡住后续点击。这个技能把反馈压缩到右下角一只简笔画小狗：尾巴明显摆动几秒后自动消失，既能传达“搞定了”，又不干扰当前操作。

它如何工作

它不追求复杂角色动画，而是用 CSS 驱动关键动画，必要时用少量 JS 控制挂载和移除。核心链路是：触发成功后，在页面右下角插入一个 pointer-events: none 的容器；容器内渲染简笔画小狗，尾巴通过旋转/摆动关键帧做明显左右摇动；启动一个短定时器，默认约 2.5～3.5s 后移除 DOM。挂载成功或失败时，通过 console 或简短 toast 给出反馈。

关键约束包括：

尾巴摆动幅度要肉眼可见，不能只是轻微抖动。
动画容器不能拦截点击，避免遮挡按钮。
结束后必须清理节点，不留遮罩或内存引用。
动画期间页面其它交互仍应可用。

适用边界与注意点

它适合“轻量庆祝”，不适合承载错误原因、表单校验、权限失败等需要用户决策的信息。如果成功操作后用户还要继续填写或确认，右下角小狗不应挡住输入区和按钮；若页面已有强提示机制，也不必叠加。还要注意视口高度、右下角固定定位、z-index 与移动端安全区，避免遮挡关键内容。动画时长应短，失败时也要能静默退出或提示原因。