将在转换时更改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;
    } 

当点击按钮移动容器/显示菜单时，一个类被添加到容器父级，css被更改为：

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

will-change似乎没有任何影响。我用对了吗？还是应该怎么用？

Answer 1

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

以下是translateX在打开/关闭菜单时的作用示例。