css - 将在过渡时更改 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 示例。