72

CSS will-changeW3.org docs、MDN docsプロパティ (Chrome で既に動作し、Firefox と Opera で部分的にサポートされています) を見つけましたが、それがどのように機能するかはよくわかりません。この謎の物体について、もっと詳しいことを知っている人はいますか？

ブラウザが将来の要素に対する計算の準備をできるようにすることを読んだところです。誤解したくありません。いくつか質問があります。

  1. このプロパティを要素クラスまたはそのホバー状態に追加する必要がありますか?

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

    また

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

  2. ブラウザのパフォーマンスをどのように向上させることができますか? 理論的には、CSS が読み込まれると、ブラウザは各要素で何が起こるかを既に「認識」していますね。

それを効率的に使用する方法を示す良い例を追加できれば、私は感謝します:)

4

7 に答える 7

4

私の知る限りでは...

  1. これは、translate-z:0 の代替です。
  2. ホバーについてはわかりませんが、JSによって徐々に変更されているプロパティ、不透明度、スクロール中の位置などで使用するのが最善です.
  3. このプロパティは、特に携帯電話やタブレットで過度に使用しないでください。あまりにも多くの要素でこれを使用すると、パフォーマンスの問題が発生する可能性があります。
  4. このプロパティが不要になった場合は、JS でこのプロパティを削除またはオフにすることをお勧めします。

したがって、使用例としては、scrollTop:400 を使用してスクロールのある時点でそれを適用し、徐々に不透明度をアニメートし、scrollTop:500 で will-change を再度無効にします。

ソース: shoptalkshow ポッドキャスト - 彼らはこの記事について言及しています - https://dev.opera.com/articles/css-will-change-property/ - おそらく私の投稿よりも優れた情報源です:D

于 2014-11-13T11:10:50.930 に答える