CSSはプロパティを変更します：いつ使用しないか

投稿日: 2022-04-20 2022-10-06
タグ: css

The will-change CSSプロパティは一般的に誤解されているか、正しく使用されていません。この短い投稿では、CSSアニメーションとトランジションを可能な限りパフォーマンスの高いものにするために、プロパティをわかりやすく説明します。

意志の変化とは何ですか？

一言で言えば、 will-change プロパティは、どのプロパティと要素が操作される可能性が高いかを事前にブラウザに通知する方法です。この情報を使用して、ブラウザーは必要になる前に最適化を行うことができ、よりスムーズなエクスペリエンスを実現できます。

この例は、 transform 要素については、次のようにブラウザに通知できます。

will-change: transform;

次のように複数の値を宣言することもできます。

will-change: transform, opacity;

値を変更します

will-change 4つの可能な値を取ることができます：

auto-ブラウザは最適化を適用します
scroll-position-作成者が近い将来に要素のスクロール位置をアニメーション化または変更することを期待していることを示します
contents -作成者が、近い将来、要素のコンテンツについて何かをアニメーション化または変更することを期待していることを示します。
custom-indent -作成者が、近い将来、要素の指定された名前でプロパティをアニメーション化または変更することを期待していることを示します。

私たちが焦点を当てる価値は custom-indent すなわち transform, opacity、など。

いつ使用するか-変更しますか？

MozillaのMDNが述べているように、 will-change 最後の手段として使用する必要があります。

の使用法を乱用した場合 will-change、私たちが望むものとは正反対のパフォーマンスの打撃を受けるでしょう。アニメーション/トランジションがスムーズで鮮明な場合は、使用する必要はありません will-change. ブラウザは、を使用せずにすでに最適化を行っています will-change.

これをしないでください！

使用時によくある間違い will-change これは：

.my-element:hover {
  will-change: opacity;
  transition: opacity .25s ease-in-out;
}

これは善よりも害を及ぼしています、 will-change 未来形なので、アニメーションが発生しているときに適用しないでください。

のより良い使用 will-change ここに置くことになるでしょう will-change の親に my-element そのようです：

.parent-element:hover {
  will-change: opacity;
}

.my-element:hover {
  transition: opacity .25s ease-in-out;
}

これにより、ブラウザはこの変更を最適化するために事前に知ることができます。アニメーションがぎくしゃくしたりちらついたりする場合は、これを最後の手段として使用することを忘れないでください。

意志変更の削除

Mozillaは削除することを推奨しています will-change 要素の変更が完了した後。これが、設定することもお勧めする理由です will-change JavaScriptを介して削除できるようにします。もしも will-change CSSスタイルシートで設定されているため、削除できません。

コード的には、これは非常に単純で、次のようになります。

const el = document.querySelector('.parent-element')
el.addEventListener('mouseenter', addWillChange)
el.addEventListener('animationend', removeChange)

const addWillChange = () => {
  this.style.willChange = 'opacity'
}

const removeChange = () => {
  this.style.willChange = 'auto'
}

上記のコードは非常に単純です。 will-change に parent-element ホバーしたとき、次に animationend イベントが発生した後、削除します will-change.

設定 will-change スタイルシートでは、状況によっては意味があります。このような状況は、複数回相互作用する可能性のある要素であり、ボタンの波及効果やサイドバーのスライドアウトなどの可能性があります。一般的に、ほんの一握りがあるはずです will-change スタイルシートのプロパティ。残りはJavaScriptで設定するのが理想的です。

結論

これは簡単な紹介でした will-change、さらに深く掘り下げたい場合は、このトピックに関するSaraSoueidanのすばらしい記事をチェックすることをお勧めします。

読んでくれてありがとう！

getdocs

13036