-1

例によって、このプロパティを正しい方法で使用する方法を誰かに説明してもらえますか? 簡単なデモを作成しました: 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);
4

1 に答える 1

0

簡単に言えば、これを JS と組み合わせてwill-change、ページの一部がインタラクティブになるときにプロパティを挿入し、ユーザーが操作する前にブラウザーがそれらのパフォーマンスを最適化できるようにすることがよくあります。

「長い」答え: dev.opera.com の Sara Soueidan の記事を読んでください。

于 2014-09-01T13:13:36.960 に答える