[解決済み] will-change' や translateZ() ハックは 'transition: height' のパフォーマンスを向上させるか？

質問

開閉時に高さがアニメーションするアコーディオンを作っていますが、コンテンツの高さはJSで計算されています。最高のパフォーマンスを確保したいので、強制的なハードウェアアクセラレーションについて考えていました。

.accordion-item-content {
    overflow: hidden;
    transition: height .3s ease;
    transform: translateZ(0);
    will-change: transform;
}

Chrome Dev Toolsでは、アコーディオンアイテムがそれぞれレイヤーを取得していることがわかりますが（will-changeやtransformプロパティのため）、これはパフォーマンスアップにつながるのでしょうか？ それとも、私がここで理解したように、GPUレンダリングから恩恵を受けることができる唯一のプロパティは、transform、opacity、filterなのでしょうか？ http://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

もう一つ質問です。will-change: height'は何か効果があるのでしょうか？有効なように見えますが ( https://developer.mozilla.org/en-US/docs/Web/CSS/will-change しかし、レイヤーが作成されないことが、開発ツールで確認できました。

どうすればいいですか？

特になし will-change または transform: translateZ() は、要素をそれ自身のレイヤーに昇格させ、GPUに送ります。 次の例を見てください。 https://csstriggers.com/ . アニメーションを行うのは transform と opacity . を使用していても、その他のプロパティは再描画やレイアウトの再計算の原因となります。 will-change .