反馈容器必须硬编码在HTML中且紧贴input之后，用visibility:hidden等隐藏而非display:none，以避免布局跳动、读屏器误读和动画失效。
抖动提醒必须和反馈区域共存于稳定 DOM 结构中，不能靠 JS 动态插入；否则布局跳动、读屏器误读、动画失效三连击。
为什么 feedback 容器必须写死在 HTML 里
常见错误是 JS 校验失败后才 appendChild 一个提示 div，结果页面“一抖一挤”：新元素插入导致流式布局重排，下方所有内容下移。这不是动画问题，是结构缺陷。
- 反馈区必须紧贴
input元素之后，作为其兄弟节点硬编码在 HTML 中 - 用
visibility: hidden; height: 0; overflow: hidden;隐藏，而非display: none—— 后者会让父容器高度塌缩，动画位移时可能被截断 - 若父容器是
flex或grid，给 feedback 区设min-height: 1.2em，保底占位不破坏行高 - 移动端需额外加
touch-action: none和临时禁用pointer-events，防止抖动期间误触
抖动动画触发前必须强制重排
只加 shake 类名常没反应，因为浏览器认为 transform 值没变，跳过重绘。这不是 bug，是优化机制。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 稳妥做法：触发前先清空动画，再强制读取
offsetHeight触发重排，最后重设动画 - 示例代码：
el.style.animation = 'none';<br>el.offsetHeight;<br>el.style.animation = 'shake 0.4s ease-in-out 1 forwards';
- 别依赖
will-change: transform后不清理——它会锁住合成层，抖完不恢复就卡住后续动画 - 父容器若设了
overflow: hidden，确保抖动位移量（如 ±4px）不超出边界，否则“抖了一半就没了”
aria-invalid 和 class 切换必须同步更新
抖动只是视觉反馈，可访问性状态才是关键。读屏器不看动画，只认 aria-invalid 和 CSS 伪类。
立即学习“前端免费学习笔记（深入）”；
- 每次
blur开始校验前，先执行：input.removeAttribute('aria-invalid')+input.classList.remove('error')+ 清空 feedback 文本 - 校验失败后，三件事必须一起做：
input.setAttribute('aria-invalid', 'true')、input.classList.add('error')、feedback.textContent = '至少 3 个字符' - 校验通过后，
setCustomValidity('')必须调用，否则checkValidity()永远返回false - 不要在
input事件里调用reportValidity()—— 它弹气泡，打断输入流
最易忽略的是 feedback 容器的初始存在性：它不是“提示组件”，而是表单控件不可分割的语义延伸。抖动可以改，但结构一旦动态生成，可访问性和布局稳定性就全崩了。
