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

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を削除することをお勧めします。そのため、JavaScriptでwill-changeを設定して、削除できるようにすることもお勧めします。 CSSスタイルシートでwill-changeが設定されている場合、削除できません。

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

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イベントが発生したときに、[を削除します。 X156X]。

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

結論

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

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