display 属性无法过渡因其为离散值，浏览器不能计算 none 与 block 的中间状态；应改用 visibility、opacity、transform 和 max-height 等可过渡属性实现动画效果。
transition 为什么对 display: none 元素无效
因为 display 是离散属性，浏览器无法插值计算 none → block 的中间状态，过渡直接跳变。哪怕你写了 transition: all 0.3s，只要涉及 display 切换，动画就失效。
常见错误现象：点击提交后错误提示文字“啪”一下弹出来，没有淡入或滑动效果。
- 用
visibility: hidden+opacity: 0替代display: none，两者都可过渡 - 配合
height或max-height实现高度展开（注意：height: auto无法过渡，得用固定值或max-height估算上限） - 务必给元素初始状态设好
transition，不要只在显示时加——否则首次出现无动画
如何让错误提示文字“从下往上滑出”
靠 transform: translateY() 最稳妥，不触发重排，性能好，且兼容性覆盖到 IE10+。
使用场景：表单字段校验失败后，在输入框下方动态插入一段红色提示文字，要求带滑入+淡入复合动画。
立即学习“前端免费学习笔记（深入）”；
- 初始状态设为
transform: translateY(-10px); opacity: 0;，并加transition: transform 0.25s ease, opacity 0.25s ease; - 显示时改为
transform: translateY(0); opacity: 1; - 避免用
margin-top做位移——它会引发布局重排，动画可能卡顿 - 如果父容器有
overflow: hidden，记得检查滑入时是否被裁切
input 失焦触发验证时，提示动画反复闪动怎么办
本质是验证逻辑和 CSS 状态没对齐：JS 可能频繁 toggle 类名，而 transition 还没结束就又改回去了，造成“抽搐”。
典型错误：监听 blur 后立刻 element.classList.add('error')，但没控制类名切换节奏。
- 验证通过后，先用
setTimeout延迟移除error类（比如 100ms），确保退出动画播完再清理 - 或者用
getComputedStyle(element).opacity检查当前是否已完全隐藏，再决定是否操作 - 更可靠的做法：统一用一个状态变量（如
isShowingError）控制 JS 行为，避免 race condition - 别在
:focus伪类里写过渡——它和 JS 控制的类容易冲突
Chrome 120+ 中 transitionend 事件监听不到？
不是 bug，是浏览器优化：当元素在 transition 开始前已被移出 DOM（比如验证失败后快速切页），transitionend 就不会触发。
这会导致你依赖该事件做的清理逻辑（如清空定时器、恢复按钮状态）漏执行。
- 永远给
transitionend加超时兜底：setTimeout(() => { /* 清理 */ }, 300)，时间略长于 CSS 中写的 duration - 监听事件时用
once: true防止重复绑定，但必须配合上面的 timeout，否则可能漏掉 - 不要只监听
transitionend就认为动画一定完成了——它只代表浏览器“打算播完”，不保证视觉上真播完了（尤其低性能设备）
真正难搞的是多层嵌套过渡（比如文字滑入 + 背景色渐变 + 边框抖动），每层 timing 和 cancel 逻辑都要单独对齐，稍不注意就不同步。这种时候，老实用 JS 动画库反而更省心。
