有人能通过示例向我解释如何正确使用此属性吗?我做了一个简单的演示:http://jsfiddle.net/zlaja/hnb1qbtv/1/我想知道在CSS或JS中在哪里使用这个属性?
body {
margin: 0;
}
.l-header {
width: 300px;
height: 1000px;
background: red;
transform: translate3d(-100%, 0, 0);
transition: transform 0.3s ease-in-out;
will-change: transform;
/*Is this the right place ???*/
}
a {
position: absolute;
right: 10px;
}
.toggle-header {
transform: translate3d(0, 0, 0);
}
<a href="#">Menu</a>
<header class="l-header"></header>
var menu = document.querySelector("a"),
header = document.querySelector(".l-header");
var toogle = function () {
header.classList.toggle("toggle-header");
}
menu.addEventListener("click", toogle, false);
简单的答案是:您可能经常将其与JS配对,以便在页面的各个部分交互时注入will-change
属性,从而允许浏览器在用户与它们交互之前对它们进行优化。
"长"答案:阅读Sara Soueidan在dev.opera.com.上的文章