只用opacity过渡提示框会“卡一下才走”，因为opacity: 0仅使元素透明，仍占据文档流、响应点击、不释放布局空间，且pointer-events默认为auto，悬停仍触发伪类，导致堆叠遮挡、误触或半透明残影。
只用opacity过渡为什么提示框“卡一下才走”
单纯设opacity: 0后，元素还在文档流里占位、能响应点击、布局没释放——用户看到的是“透明但没走”，尤其多条连续弹出时，会堆叠遮挡或误触。浏览器不会因为透明就自动移除它，pointer-events默认仍是auto，悬停仍触发伪类。
常见错误现象：鼠标划过已opacity: 0的提示框，:hover样式仍生效；滚动时发现“空区域”还在推挤内容；快速连点关闭按钮，动画中途被中断，留下半透明残影。
- 必须配合
visibility: hidden（控制可交互性）和pointer-events: none（防误点） -
transition要写在非激活态规则里，否则首次显示无动画 - 避免对
height或max-height做过渡——内容高度不固定时易抖动
transition与animationend事件怎么配合清理DOM
靠setTimeout删元素是危险操作：CSS自定义变量可能改了动画时长，媒体查询可能降级为0.1s，而JS还按原计划延时，结果DOM提前被删，动画直接卡住或报错。
正确做法是监听animationend或transitionend事件，且校验触发源：
- 给提示框加类如
.toast--fading启动过渡，同时设pointer-events: none - 监听
transitionend，检查e.propertyName === 'opacity'（避免transform等其他过渡干扰） - 清理前先
if (element.parentNode)确认元素仍在DOM中，防止重复触发
示例关键逻辑：
element.classList.add('toast--fading');
element.style.pointerEvents = 'none';
element.addEventListener('transitionend', function handler(e) {
if (e.propertyName !== 'opacity') return;
element.remove();
element.removeEventListener('transitionend', handler);
});
移动端 Safari 的:target弹窗自动消失为什么失效
iOS Safari ≤15.4 对哈希变更（#close）有丢帧风险，连点遮罩层时URL没变，:target不匹配，弹窗就卡住。这不是CSS写错了，是渲染引擎限制。
实操建议：
- 遮罩层加
pointer-events: none，改由弹窗容器本身监听click并手动切换location.hash - 确保
#close对应元素真实存在（哪怕<div id="close"></div>藏在页脚），否则:target无匹配目标 - 弹窗容器的
:target样式里不要设transition，只控制显隐；遮罩层本身禁用transition，只作状态开关
为什么transform比top更适合做滑入滑出
top触发重排（layout），动画卡顿明显；transform走合成层，GPU加速，iOS Safari也更稳。
性能影响要点：
- 用
transform: translateY(-100%)代替top: -100%隐藏，用translateY(0)显示 - 两个过渡属性（如
opacity和transform）时间必须一致，否则出现“先显后移”割裂感 - 别用
display: none切状态——它无法过渡，会导致闪退 - 若容器高度不固定（如含换行文本），用
transform: translateY(calc(-1 * var(--toast-height)))+ CSS变量更可靠
容易被忽略的细节：动画结束后的remove()必须等transitionend真正完成，不能依赖视觉判断；移动端连点时，要防重复添加/移除类导致过渡中断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
