标准答案
- transform 和 opacity 通常不会改变元素在文档流中的尺寸和布局位置。
- 浏览器可以把这类元素放到合成层，在合成阶段处理位移、缩放、旋转或透明度，减少布局和绘制压力。
- top、left 改变的是定位元素的布局位置，每一帧修改它们更容易触发布局计算或绘制，动画帧率更容易抖动。
- 做位移动画优先用 transform: translate，做淡入淡出优先用 opacity。
- will-change 可以提前提示浏览器，但只给即将动画的少量元素使用，动画结束后最好移除，避免过多合成层占内存。
题目解析
这题是重排重绘的延伸。回答时不要绝对说 transform 一定不卡，它只是更容易避开布局和绘制瓶颈。
如果元素很大、滤镜复杂、半透明叠加很多，即使走合成也可能有 GPU 和内存压力。
代码示例
用 transform 做位移动画，避免每帧修改 top。
CSS
.toast {
transform: translateY(16px);
opacity: 0;
transition: transform 180ms ease, opacity 180ms ease;
}
.toast.is-visible {
transform: translateY(0);
opacity: 1;
}常见误区
- 所有动画都用 top、left 做位移。
- 认为 will-change 可以全局加，结果创建过多合成层。
- 只关注属性选择，不关注动画元素大小和同时动画数量。