dialog不支持直接用css动画触发抖动，因其关闭时为display:none，动画无法启动；必须在showmodal()后监听aftertoggle事件、确认open为true再添加抖动class，并用animationend自动移除以确保精准触发和重复可用。
dialog元素不支持直接用CSS动画触发抖动？
因为 dialog 默认是 display: none（关闭状态），而 CSS 动画无法在 display: none 元素上运行——哪怕你写了 @keyframes shake，只要它没被设为 display: block 或 flex 等可见值，动画就根本不会启动。
所以关键不是“怎么写抖动动画”，而是“怎么让动画在 dialog.showModal() 后正确触发”。
抖动动画必须绑定到 visible 状态后的 dialog 元素
最稳妥的做法：监听 dialog 的 aftertoggle 事件，在确认它已显示后再添加抖动 class。不要依赖 setTimeout 或 CSS 的 animation-delay，因为渲染时机不可靠。
-
dialog首次调用showModal()时会触发aftertoggle，且event.target.open === true - 抖动 class 应该用
animation-fill-mode: forwards避免结束后回弹，但注意：抖动是瞬态反馈，通常不需要保持最终态，所以更推荐用forwards+ 手动移除 class - 避免对
dialog::backdrop做动画，它不响应 transform，抖动会失效
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
50% { transform: translateX(4px); }
75% { transform: translateX(-4px); }
}
dialog.shaking {
animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
为什么用 cubic-bezier(.36,.07,.19,.97) 而不是 ease-in-out？
抖动需要“突然启动 + 急停”，ease-in-out 太柔和，末端减速会让抖动像被缓冲了一样失去警示感。上面这个贝塞尔曲线是 Material Design 推荐的“alert shake”节奏：快速起始、几乎无缓入、强阻尼收尾。
- 如果抖动用于表单校验失败，建议只执行 1 次（
animation-iteration-count: 1）；重复抖动易引发用户烦躁 - 移动端需加
transform: translateZ(0)强制硬件加速，否则 iOS Safari 可能掉帧 - 别给
dialog设overflow: hidden，否则抖动时边缘可能被意外裁剪
实际绑定抖动的 JS 逻辑不能漏掉 cleanup
抖动只是临时视觉反馈，必须在动画结束后立刻移除 shaking class。否则下次再触发抖动时，CSS 动画因 class 未变化而不会重播（浏览器跳过相同 class 的重复动画）。
- 用
element.addEventListener('animationend', handler, { once: true })最安全 - 不要用
setTimeout等固定毫秒数，因为动画时长可能被用户缩放、系统性能影响 - 如果用户快速连续触发多次错误（比如连点提交按钮），应防抖：检查
dialog.classList.contains('shaking')，有则跳过
抖动本身很简单，难的是确保它只在真正 visible 且 ready 的那一刻精准发生——而这一点，恰恰是绝大多数人直接写 dialog.shaking { animation: ... } 却发现“动不了”的根本原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
