scale(0)仅视觉缩放，不改变文档流、盒模型和事件区域，需配合visibility:hidden或display:none清除占位；混用opacity易致渲染错乱，应优先单用transform或加will-change升层；css动画须js监听结束事件清理dom。
用 transform: scale() 隐藏元素时，为什么缩到 0 后还占位
因为 scale(0) 只是视觉上“压扁”，元素的文档流位置、盒模型尺寸、事件响应区域全都没变。用户点不到、屏幕阅读器读得到、父容器依然按原来大小撑开。
实操建议：
- 必须配合
visibility: hidden或display: none在动画结束后移除占位 - 不能只靠
transition控制scale，得用animationend事件或setTimeout触发隐藏 -
visibility: hidden保留盒模型，适合需要维持布局的场景；display: none彻底退出流，更常用
scale() 动画和 opacity 淡出混用会出什么问题
常见错误现象：scale(0) + opacity: 0 同时过渡，但结束时元素突然“闪一下”或触发重排——尤其在 Safari 或旧版 Chrome 中。
原因在于：某些浏览器对 opacity 和 transform 的合成层处理不同步，导致渲染管线错乱；另外，如果父容器有 overflow: hidden，scale 过程中可能被意外裁剪。
实操建议：
- 优先只用
transform: scale()+visibility: hidden，避免叠加opacity - 若必须淡出，改用
opacity单独过渡，放弃收缩效果；或用transform: scale()+opacity但加will-change: transform, opacity提前升层 - 测试时重点看 Safari 和 iOS WebView，这两个环境对
scale(0)的渲染最不稳定
如何用 CSS 动画实现“收缩消失”并自动清理 DOM 占位
核心思路：CSS 负责动画，JS 负责收尾。不能指望纯 CSS 在 scale(0) 后自动设 display: none。
实操建议：
- 定义动画：
@keyframes shrinkOut { to { transform: scale(0); opacity: 0; } } - 绑定动画并监听结束：
el.addEventListener('animationend', () => { el.style.display = 'none'; }); - 注意：要加
animation-fill-mode: forwards，否则动画一结束就回退到初始状态，scale和opacity都会复原 - 如果用
transition（非 animation），监听transitionend，但需确保只监听transform属性：event.propertyName === 'transform'
React/Vue 里直接用 scale 做消失动画容易踩哪些坑
框架的条件渲染（如 v-if 或 {show && <comp></comp>}）会直接卸载组件，CSS 动画根本没机会播完。
实操建议：
- 不要把显示逻辑写在条件渲染里，改用 class 控制：
className={show ? 'visible' : 'hidden'} - 在
hidden类里定义animation: shrinkOut 0.2s forwards，并在动画结束后用useEffect或watch清理状态 - Vue 用户注意：
v-show是靠display切换，不影响动画；但默认不触发 transition，需显式加<transition></transition>包裹并配leave-to类 - React 用户可用
react-transition-group，但别依赖它的CSSTransition自动加类——它默认加的是exit类，得手动映射到transform: scale(0)
scale(0) 只是画布上的一个像素点，真正“消失”的判断永远得由 JS 来做。这个边界，很多人一开始会忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
