最常用方式是在click事件中用element.classList.add()添加含@keyframes的类，但需确保该类含animation/transition声明且不被display:none等覆盖；多次触发需先remove再add并强制重排（如void offsetWidth）或用setTimeout(0)；清理动画类推荐使用{once:true}的animationend监听；移动端应优先用touchstart或pointerdown避免300ms延迟。
点击后添加动画类的常见写法
直接在 click 事件里用 element.classList.add() 加上带 @keyframes 的类是最常用方式。关键不是“加类”，而是确保这个类的 CSS 规则能触发重绘并播放动画——比如必须包含 animation 或 transition 声明，且不能被其他样式覆盖。
常见错误是加了类但没反应，往往因为：
-
animation属性写在类里，但该类同时设置了display: none或visibility: hidden - 动画类和原始状态的
transform/opacity等属性冲突，导致动画起始帧被跳过 - 重复点击时，类已存在，
add()不会二次触发动画（CSS 动画不会因重复加同类而重播）
如何让多次点击都重新播放动画
靠单纯 add() 行不通，得“先移除再加回”或“强制重流”。推荐用 void element.offsetWidth 触发重排，再加类：
button.addEventListener('click', () => {
box.classList.remove('animate');
void box.offsetWidth; // 强制重排，清空浏览器的动画状态缓存
box.classList.add('animate');
});
另一种更稳妥的做法是用 setTimeout 延迟加类（哪怕只延 0ms），也能绕过浏览器对连续 DOM 变更的合并优化：
立即学习“Java免费学习笔记（深入）”；
