如何正确使用css会改变属性?

时间:2014-09-01 13:08:43

标签: css performance css3 web web-platforms

任何人都可以通过示例向我解释如何以正确的方式使用此属性吗? 我做了一个简单的演示: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);

1 个答案:

答案 0 :(得分:0)

简短的回答:您可能经常将其与JS配对,在页面的某些部分进行交互时注入will-change属性,以允许浏览器在之前对其进行性能优化用户与他们互动。

&#34; long&#34;回答:阅读Sara Soueidan's article on dev.opera.com