will-在转换时更改css使用情况

Question

我正在尝试使用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;
    } 

点击按钮移动container/show menu时，会将一个类添加到container parent中，并将css更改为：

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

will-change似乎没有任何影响。我是否正确地使用它，或者应该如何使用它？

Answer 1

使用transform: translateX(240px)而不是left: 240px。这不能很好地执行的原因是position属性不支持硬件加速，而transform属性支持。

用于菜单打开/关闭的Here is an example of translateX in action。