0

will-changeアニメーションのパフォーマンスを向上させるために使用しようとしています。サイドメニューを移動して表示するために、アニメーションleft化するページコンテナがあります。padding-right

.page-container {
    background: #f4f4f4;
    height: 100%;
    left: 0;
    padding-right: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1001;
    will-change: left, padding-right;
    transition: left 0.4s ease-out, padding-right 0.4s ease-out;
    }

ボタンをクリックしてコンテナーを移動/メニューを表示すると、クラスがコンテナーの親に追加され、css が次のように変更されます。

.page-wrapper.menu-opened .page-container {
            left: 240px;
            padding-right: 240px;
            }

will-change影響はないようです。私はそれを正しく使用していますか、またはどのように使用する必要がありますか?

4

1 に答える 1

0

transform: translateX(240px)の代わりに使用 しleft: 240pxます。これがうまく機能しない理由は、positionプロパティがハードウェア アクセラレーションをサポートしているにもかかわらず、プロパティがハードウェア アクセラレーションをサポートしていないためtransformです。

これは、メニューを開く/閉じるためのアクションの translateX の例です。

于 2015-12-04T22:59:24.287 に答える