transform和opacity是唯一安全的动画属性，因它们仅触发gpu合成、不触发重排与重绘；而width、height、left、top等会强制每帧重算布局，导致cpu满载卡顿。
为什么transform和opacity是唯一安全的动画属性
移动端卡顿最常见原因是用了width、height、left、top这类会触发重排（reflow）的属性。浏览器每帧都得重新计算整个布局树，CPU直接拉满。而transform和opacity只走合成线程，GPU加速，不碰布局也不重绘。
- 位移必须用
transform: translateX(10px)，别写left: 10px - 缩放统一转成
transform: scale(1.1)，别改width/height - 显隐用
opacity: 0，别用visibility: hidden或display: none -
background-position动画也会重绘，换成transform: translate()模拟位移更稳
will-change不是开关，是“预告信”
will-change: transform不是加了就变快，它是告诉浏览器“这个元素马上要动”，让浏览器提前分配图层内存。但设早了、忘了删、或者用在不动的元素上，反而吃内存、拖慢渲染。
- 只在用户交互触发前一刻设置：比如
touchstart事件里加.is-animating类 - 动画结束立刻清除：监听
transitionend或animationend，然后el.classList.remove('is-animating') - 别全局写
.navbar-collapse { will-change: transform }——列表项一多，图层爆炸 - Bootstrap侧边栏折叠时可加：
.sidebar { will-change: transform }，但仅限动画期间
Navbar菜单展开卡顿？max-height值没跟上动画时长
Bootstrap移动端菜单靠max-height过渡实现展开动画，但默认终点值（如300px）是静态估算的。你把transition-duration调到0.6s，却没增大max-height，浏览器会在动画中途突然截断内容，看起来像卡住。
- 必须同步改两个地方：
.navbar-collapse.show { max-height: 120vh !important; transition: max-height 0.6s ease-in-out !important; } - 别用
max-height: none——它不参与CSS transition，动画会跳变 - 如果菜单项固定且少（比如4个
.nav-link），可精确设max-height: 280px，比120vh更轻量 - dropdown嵌套在菜单里时，
.dropdown-menu是绝对定位，不占高度，但父容器有padding，实际撑高可能超终点值——这时得手动给.nav-item清padding或设min-height: auto
点击没反馈、按钮按下去没反应？不是CSS问题，是触摸机制没对齐
真机上:active失效、300ms延迟、蓝灰高亮残留，根源是iOS Safari等浏览器默认等待双击缩放。光写.btn:active { background: #007bff }没用，浏览器根本没在触摸瞬间触发它。
- 必须同时加两行CSS：
.btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } - 作用目标只能是语义化元素：
button、a.btn、[data-bs-toggle]，别写在div或body上 - 对
data-bs-toggle组件（如dropdown按钮），还需补JS监听：btn.addEventListener('touchend', e => { e.preventDefault(); btn.click(); }) - 视觉反馈别只靠
:active，加transform: scale(0.96)过渡更可靠，但前提是上面两条CSS已生效
复杂交互动画（比如下拉刷新+侧滑菜单叠加）里，will-change和transform的时机控制稍有偏差，就容易出现图层未及时创建或残留，这时候DevTools的Layers面板比任何经验都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
