From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/will-change/index.html | 164 +++++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 files/zh-cn/web/css/will-change/index.html (limited to 'files/zh-cn/web/css/will-change') diff --git a/files/zh-cn/web/css/will-change/index.html b/files/zh-cn/web/css/will-change/index.html new file mode 100644 index 0000000000..8ae9374a37 --- /dev/null +++ b/files/zh-cn/web/css/will-change/index.html @@ -0,0 +1,164 @@ +--- +title: will-change +slug: Web/CSS/will-change +translation_of: Web/CSS/will-change +--- +
{{ CSSRef() }}{{SeeCompatTable}}
+ +

CSS 属性 will-change 为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

+ +

用好这个属性并不是很容易：

+ + + +

{{cssinfo}}

+ +

语法

+ +
Formal syntax: {{csssyntax("will-change")}}
+
+ +
will-change: auto
+will-change: scroll-position
+will-change: contents
+will-change: transform        // Example of <custom-ident>
+will-change: opacity          // Example of <custom-ident>
+will-change: left, top        // Example of two <animateable-feature>
+
+will-change: unset
+will-change: initial
+will-change: inherit
+
+ +

取值

+ +
+
auto
+
表示没有特别指定哪些属性会变化，浏览器需要自己去猜，然后使用浏览器经常使用的一些常规方法优化。
+
+ +

<animateable-feature> 可以是以下值：

+ +
+
scroll-position
+
表示开发者希望在不久后改变滚动条的位置或者使之产生动画。
+
contents
+
表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。
+
<custom-ident>
+
表示开发者希望在不久后改变指定的属性名或者使之产生动画。如果属性名是简写，则代表所有与之对应的简写或者全写的属性。
+
+ +

示例

+ +
.sidebar {
+  will-change: transform;
+}
+
+ +

以上示例在样式表中直接添加了 will-change 属性，会导致浏览器将对应的优化工作一直保存在内存中，这其实是不必要的，前面我们已经看过为什么应该避免这样的做法。下面是另一个展示如何使用脚本正确地应用 will-change 属性的示例，在大部分的场景中，你都应该这样做。

+ +
var el = document.getElementById('element');
+
+// 当鼠标移动到该元素上时给该元素设置 will-change 属性
+el.addEventListener('mouseenter', hintBrowser);
+// 当 CSS 动画结束后清除 will-change 属性
+el.addEventListener('animationEnd', removeHint);
+
+function hintBrowser() {
+  // 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
+  this.style.willChange = 'transform, opacity';
+}
+
+function removeHint() {
+  this.style.willChange = 'auto';
+}
+ +

但是，如果某个应用在按下键盘的时候会翻页，比如相册或者幻灯片一类的，它的页面很大很复杂，此时在样式表中写上 will-change 是合适的。这会使浏览器提前准备好过渡动画，当键盘按下的时候就能立即看到灵活轻快的动画。

+ +
.slide {
+  will-change: transform;
+}
+ +

参考

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS Will Change', '#will-change', 'will-change') }}{{ Spec2('CSS Will Change') }}Initial definition
+ +

浏览器兼容

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(36)}}{{CompatGeckoDesktop(36)}} [1]{{CompatNo}}{{CompatOpera(24)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile(36)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] 在 Firefox 31 到 35 中，需要在 about:config 中开启 layout.css.will-change.enabled 选项。

-- cgit v1.2.3-54-g00ecf