如何使用和如何工作CSS的将改变属性-码文网

我发现 CSSwill-change^{W3.org docs，MDN docs}属性（已经在 Chrome 中工作，并且由 Firefox 和 Opera 支持），但我不确定它是如何工作的。

我刚刚读到，它允许浏览器为将来的元素计算做准备。我不想误解它。所以我有几个问题。

我应该将此属性添加到元素类或其悬停状态？

.my-cl{
    will-change: 'opacity, transform'
}
.my-cl:hover{
    opacity: 0.5
}
.my-cl:active{
    transform: rotate(5deg);
}

或

.my-cl{
    ...
}
.my-cl:hover{
    will-change: 'opacity'
    opacity: 0.5
}
.my-cl:active{
    will-change: 'transform'
    transform: rotate(5deg);
}

从理论上讲，当加载 CSS 时，浏览器已经“知道”每个元素会发生什么，不是吗？

如果您可以添加任何说明如何有效使用它的好例子，我将不胜感激:)

我不会复制粘贴整个article在这里，但这里是一个 tl;dr 版本：

指定您想要更改的内容可以使浏览器更好地决定需要对这些特定更改进行的优化。这显然是一种更好的方法，可以提高速度，而无需诉诸黑客并迫使浏览器进行可能需要或可能不需要或有用的图层创建。

如何使用它：

will-change: transform, opacity;

如何不使用它：

will-change: all;
.potato:hover {
  will-change: opacity;
  opacity:1;
}

在悬停时指定will-change不起作用：

在元素更改之前立即在元素上设置 will-change 几乎没有效果。(这实际上可能比完全不设置它更糟糕。当你正在制作动画的东西以前不符合新图层的条件时，你可能会产生一个新图层的成本！)

我花了一些时间在搜索will-change属性如何工作以及我们如何使用它。我希望,这将是有用的总结。谢谢大家的答案。

1.层 Hack / Null 变换 Hack

在“古代”（如 2 年前）有人发现你可以更快地绘制你的 CSS 动画。

它是如何工作的？

如果将transform: translateZ(0)添加到 css 选择器，它将强制浏览器将具有此选择器的元素移动到新的合成器层。此外，它将提高性能（在大多数情况下，使用 GPU 而不是 CPU 的功能）read more here。

2.Bye Bye hacks,welcome "will-change:"

也许，现在说再见 Layer Hack 还为时过早，但这一次很快就会到来。新属性will change出现在 CSS 的规范中，并将成为层黑客的伟大继任者。

3.浏览器支持

目前，它在 Chrome 和 Opera 中可用，并且部分受 Firefox 支持。

4.如何正确使用它

不要在 CSS 中的任何地方使用 will-change，直到你完成实现你的动画。只有这样，你才应该回到你的 CSS 并应用 will-change。More

这可能是你能得到的最有价值的建议。

没有必要在操作开始之前直接使用它，例如将其添加到选择器的:hover状态。因为浏览器在更改发生之前不需要准备优化。浏览器将需要大约 200 毫秒来应用优化，因此例如，当父元素处于悬停状态时，最好将will-change添加到元素中。More

例子：

 .parent:hover .change{
     will-change: opacity;
 }
 .change:hover{
    opacity: .5;
 }

您需要非常谨慎地使用它。如果您想优化所有内容，结果将与预期相反。will-change强制浏览器保持优化状态，并为将来可能永远不会发生的更改保留内存等资源。建议在以后不再需要时（例如动画完成时）关闭will-change。

您可以使用 JavaScriptdocument.getElementById('my_element_id').style.willChange = off;轻松完成

现在在 CSS 的帮助下，你可以做各种动画，有时这个动画会成为 CPU 的瓶颈。因此，与其在 CPU 上做这项工作，不如使用 GPU 来完成这项任务。不久前，人们开始使用一个技巧来完成 2D 转换，方法是:

.accelerate {
  -webkit-transform: translate3d(0, 0, 0);
}

这使得浏览器认为它正在进行 3D 转换，并且因为所有 3D 转换都使用 GPU，所以这将卸载 CPU。这看起来很 hacky（因为事实上它是）和will-change属性将通过通知浏览器在将来寻找变化来改变这一点，并相应地优化和分配内存。

基于W3C draft，

The will-change CSS property...allows an author to inform the UA ahead of time of what kinds of changes they are likely to make to an element.This allows the UA to optimize how they handle the element ahead of time,performing potentially-expensive work preparing for an

使用will-change的好主意是让浏览器提前知道元素上的更改可以预期。这允许浏览器提前进行适当的优化，从而加快渲染速度。

这个信息是from this excellent explanation关于will-change属性的。文章有额外的例子，当它很好地使用它，当它是无用的，甚至是有害的

据我所知...

它是 translate-z:0 的替代方法。

我不知道悬停，但 afaik 最好在 JS 逐渐改变的属性上使用它，改变不透明度，滚动期间的位置等。

这个属性不应该被过度使用，特别是在手机，平板电脑上，在太多的元素上使用这个可能会导致性能问题。

当 JS 不再相关时，鼓励删除 / 关闭此属性。

因此，示例用法将应用在滚动的某个点，与 scrollTop：400，然后逐渐动画不透明度，并在让说 scrollTop：500，禁用将再次改变。

来源：shoptalkshow 播客-他们提到这篇文章-https://dev.opera.com/articles/css-will-change-property/-这可能是比我的帖子更好的信息来源：D

本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处

如何使用和如何工作CSS的将改变属性

发表评论

评论列表（75条）

如何使用和如何工作CSS的将改变属性

相关推荐

发表评论

评论列表（75条）