opacity过渡失效的根本原因是DOM移除早于过渡渲染完成，须监听transitionend事件并校验e.propertyName==='opacity'后移除元素，同时确保transition定义在预设类中、及时清理监听器且避免display等中断属性。
transition + opacity 移除时失效的常见原因
直接给 opacity 加 transition，然后在 JS 里设 opacity: 0 再立刻 remove()，元素会“啪”一下消失——过渡根本没机会播。因为 DOM 移除动作比 CSS 过渡触发还快，浏览器直接跳过渲染阶段。
真正要做的，是让移除动作「等过渡结束再执行」。关键不是怎么写 CSS，而是怎么协调 JS 的时机。
-
transition必须写在「移除前就存在的类」上（比如.fade-out），不能只写在 JS 动态加的类里再立刻删 - 监听
transitionend事件，但得过滤掉非opacity的属性（比如transform也触发同一事件） - 过渡时间要和 CSS 中的
transition-duration严格一致，否则 JS 等太久或太早
如何正确监听 opacity 过渡结束
别用 setTimeout 硬等，它不感知真实渲染节奏，尤其在页面卡顿或高 DPI 屏幕下容易错判。必须用原生事件，且做属性过滤。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
element.classList.add('fade-out');
element.addEventListener('transitionend', function handler(e) {
if (e.propertyName === 'opacity') {
element.remove();
element.removeEventListener('transitionend', handler);
}
});
-
fade-out类里必须含opacity: 0和transition: opacity 0.2s ease - 一定要用
e.propertyName === 'opacity'判断，避免其他 transition 干扰（比如同时动了height） - 移除监听器是必须的，否则后续同元素复用会出问题
display: none 会中断过渡，但 visibility 不行
如果在过渡中给元素设 display: none，浏览器立刻终止所有动画，transitionend 压根不会触发。而 visibility: hidden 虽然隐藏了元素，但不触发 transitionend（因为它不是 opacity 变化）。
- 过渡期间禁止操作
display、visibility、z-index等影响布局/可见性的属性 - 想提前中断过渡？用
getComputedStyle(element).opacity检查当前值，再决定是否清理状态 - 需要兼容老浏览器（如 IE10）？
transitionend要补webkitTransitionEnd等前缀
React/Vue 等框架里别手动操作 DOM
在声明式框架里硬写 addEventListener 和 remove()，很容易和组件生命周期冲突——比如组件已卸载，回调里还去操作 DOM，报 Cannot read property 'remove' of null。
- React 推荐用
react-transition-group的CSSTransition，它自动处理 enter/exit 阶段和 ref 清理 - Vue 直接用
<transition>标签，配合v-if，内部已封装transitionend监听和安全卸载 - 手写 Hook 或指令时，务必在 effect cleanup 阶段移除事件监听器
