button标签不支持css动画重置，需用js控制：先阻止默认重置，添加shake动画类，监听animationend事件后执行form.reset()并清理类，再禁用按钮500毫秒防连点。
button 标签本身不支持 CSS 动画重置，得靠 JS 触发
HTML <button></button> 没有内置“重置动画”能力，所谓带动画的重置按钮，本质是：点击后清空表单字段 + 同时触发一个 CSS 动画（比如缩放、颜色变化、抖动）。关键在于用 JavaScript 控制 reset() 行为和动画类的添加/移除时机。
常见错误是直接给 <button type="reset"></button> 加 animation，结果动画只播一次、或重置后状态丢失导致动画失效。真正可靠的做法是手动调用 form.reset()，再用 JS 管理动画生命周期。
- 不要用
type="reset"直接绑定动画——浏览器重置会同步清空值，但 DOM 更新可能滞后，animation很容易卡在中间帧或被中断 - 必须用
event.preventDefault()阻止默认重置行为，改由 JS 分两步处理：先触发动画类，等动画结束再执行form.reset() - 推荐监听
animationend事件而非固定setTimeout，避免动画时长变更后失步
给 button 添加抖动动画（shake）并同步重置表单
抖动是重置场景最直观的反馈动画，CSS 实现简单，JS 控制精准。核心是定义一个 @keyframes shake，然后通过 JS 切换 class 控制播放。
/* CSS */
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
50% { transform: translateX(4px); }
75% { transform: translateX(-4px); }
}
.shake-trigger {
animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
对应 JS：
const resetBtn = document.querySelector('#reset-btn');
const form = document.querySelector('form');
<p>resetBtn.addEventListener('click', (e) => {
e.preventDefault();
resetBtn.classList.add('shake-trigger');</p><p>resetBtn.addEventListener('animationend', function handler() {
form.reset();
resetBtn.classList.remove('shake-trigger');
resetBtn.removeEventListener('animationend', handler);
}, { once: true });
});</p>
-
form.reset()必须在animationend后执行，否则输入框值被清空，视觉上可能看不到抖动效果（尤其 input 有 focus 样式时） -
{ once: true }避免多次点击累积监听器；用handler命名方便移除，防止内存泄漏 - 动画曲线用
cubic-bezier(.36,.07,.19,.97)比ease-in-out更干脆，符合“确认重置”的反馈感
重置后保持按钮禁用状态 0.5 秒防连点
用户狂点重置按钮会导致表单反复清空，加个短时禁用比单纯动画更实用。注意禁用时机必须在 form.reset() 完成后，否则按钮灰掉但表单还没清空，体验割裂。
- 禁用逻辑要放在
animationend回调里，且在form.reset()之后 - 用
setTimeout恢复按钮，时间设为500毫秒（和动画时长错开，避免刚恢复就又被点） - 别用
disabled属性做动画——它会让按钮失去 hover/focus 效果，建议用pointer-events: none+ 透明度降级
示例片段：
resetBtn.addEventListener('animationend', function handler() {
form.reset();
resetBtn.classList.remove('shake-trigger');
<p>resetBtn.style.pointerEvents = 'none';
resetBtn.style.opacity = '0.6';</p><p>setTimeout(() => {
resetBtn.style.pointerEvents = '';
resetBtn.style.opacity = '';
}, 500);</p><p>resetBtn.removeEventListener('animationend', handler);
}, { once: true });</p>
兼容性注意：Safari 对 animationend 事件名大小写敏感
Safari 旧版本（≤15.4）要求监听 webkitAnimationEnd，而 Chrome/Firefox 用 animationend。不加兼容处理，动画结束后重置逻辑就静默失败。
- 必须同时监听两个事件名，或用
onevent统一注册（推荐） - 不要用
if (window.CSS && CSS.supports('animation-name', 'shake'))做特性检测——这只能说明支持动画，不能说明支持事件 - 实际项目中建议封装一个
onAnimationEnd(el, callback)工具函数，内部处理前缀
最小化兼容写法：
function onAnimationEnd(el, callback) {
const endEvents = ['animationend', 'webkitAnimationEnd'];
const handler = () => {
callback();
endEvents.forEach(e => el.removeEventListener(e, handler));
};
endEvents.forEach(e => el.addEventListener(e, handler));
}
<p>// 使用
onAnimationEnd(resetBtn, () => {
form.reset();
resetBtn.classList.remove('shake-trigger');
});</p>
动画和重置逻辑耦合紧密，最容易忽略的是事件时机——动画没播完就重置，或重置完了才开始播，都会让反馈失效。动手前先确认你的 CSS 动画是否真能被 JS 检测到 animationend，而不是靠猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
