为什么我的动画元素在 Layers 面板里没单独成层？

司空慧研提问于 2026-03-17 15:28:21 阅读 4

工具

我在做 CSS 动画优化，听说把元素提升到合成层能提升性能，但用 Chrome DevTools 的 Layers 面板看，加了 will-change: transform 的元素居然没单独成层，这是为啥？

我试过加 transform: translateZ(0) 也不行，代码很简单：

const box = document.querySelector('.box');
box.style.willChange = 'transform';
box.style.transition = 'transform 0.3s';
box.addEventListener('mouseenter', () => {
  box.style.transform = 'scale(1.1)';
});

明明有 transform 变化，为什么 DevTools 里还是只有一个主 layer？

我来解答赞 2 收藏

反馈

暂无解答