在 Chrome 中推送侧边菜单生涩的 CSS 转换过渡

Question

我有这种情况，我很想知道我该怎么做才能使菜单滑动顺畅，一直向右（在菜单打开时）和向左（在菜单关闭时）在运动开始和结束时没有那种有时会覆盖身体部位包裹物的抖动中断粘性效果；

我已尝试应用平滑过渡，但问题仍然存在：

#responsive-menu-pro-button, #responsive-menu-pro-container, .edge-wrapper {    
  -ms-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;
  -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;
  -o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;      
}

另外，设置transition-delay: .0s 应该 使slider 与wrapper 同时翻译，但它不适用。也许我没有选择正确的元素（？）或者有一个延迟值集干扰了这个规则，但即使在这种情况下，我也没有找到任何（使用 Agent Ransack the Responsive menu files 搜索）。

@media screen and (min-width: 767px) {
    .edge-wrapper-inner, .edge-wrapper, .responsive-menu-pro-open, .responsive-menu-pro-close, 
    #responsive-menu-pro-wrapper, #responsive-menu-pro-container.push-left {
        -webkit-transition-delay: .0s !important;
        -moz-transition-delay: .0s !important;
        -ms-transition-delay: .0s !important;
        -o-transition-delay: .0s !important;
        transition-delay: .0s !important;
    }
}

请使用左上角的关于/关闭按钮观看标有红色箭头的黄色菜单容器，以查看不想要的抖动效果；在菜单打开或菜单关闭时移动结束时会很明显，在滑块的右边缘和包装器的左边缘可见。在理想条件下，没有延迟，没有抖动，滑块 + 包装器这两个元素应该像一个整体。但看起来有某种粘性弹性（？）属性应用于调用/反应，引入了这种延迟/抖动。

在 Win 10 64 位、16GB RAM、AMD Radeon HD 7700、Chrome 浏览器 69.0.3497.81 官方版本 64 位、启用硬件加速的默认 chrome://flags 设置以及 Edge 中测试 - 问题很明显，所有运动的方式，但那是另一回事。

LE : 关于浏览器重排，
奇怪的是，使用缓存和缩小 html/js/css 插件、Gzip 压缩、wordpress 中的 html 输出页面等，都无助于实现流畅的动画，即使我在优化后获得了相当不错的分数，如下所示：

PageSpeed Insights Chrome 扩展得分（检查无损重新压缩图像）

欧盟服务器的 Pingdom 分数

我尝试在 Chrome 控制台/性能中使用运行时性能分析动画序列，但我不太确定要查找什么。

问题：
是否有可能找到导致菜单打开/关闭时滑块卡顿的代码/脚本/行/事件并调整代码以使动画流畅，在 Chrome 最新版本和滑块与包装器在完全相同的时间翻译？我感兴趣的持续时间动画值几乎保持不变，而不是更少。

网站测试页here.

提示：如果没有显示上述不需要的效果，只需在性能选项卡（Chrome 控制台）中设置 CPU 4x ...6x 减速。

Answer 1

添加这个 CSS - #responsive-menu-pro-container{top:0; position: absolute;}。

这里的问题是浏览器回流，你可以在这里阅读更多 - https://developers.google.com/speed/docs/insights/browser-reflow。

Answer 2

尝试将backface-visibility:hidden 与过渡放在一起

Answer 3

根据我从this 线程、MDN will-change page 中发现的内容以及我自己的推理，这个问题是浏览器与生俱来的。我建议尝试一些事情。

我注意到在控制台更新元素的内联样式属性时出现了故障。动画在浏览器更新 DOM 之前开始。这表明 DOM 操作可能会在那一刻减慢浏览器的速度并导致动画中出现“故障”。我建议改为添加一个类更改。即，不要更新内联样式，而是尝试在样式表中添加类或属性选择器，并使用 JavaScript 来更改类或属性名称。尝试一些选择器更改的组合来传播转换而不是内联样式。由于所有元素的转换都是相同的，因此您也可以尝试向所有三个元素添加相同的类。这可能会有所帮助。

您也可以尝试将will-change: [property name]; 添加到所有接受转换的元素中。我不建议在 Web 检查器中对此进行测试，但将其添加到页面源代码并刷新，因为 Web 检查器可能不会反映更改，因为页面已经加载并呈现。另请注意，MDN 文档声明要非常谨慎地使用 will-change，因为它比普通转换消耗更多的硬件资源。

这些建议对我来说实际上并不可行，因为我只能通过网络检查器访问您的源代码。

告诉我你发现了什么。

Answer 4

解决了。这与浏览器重排、backface-visibility:hidden 或其他无关，它与匹配 css 过渡设置有关；我是这样修改的：

#responsive-menu-pro-button,
#responsive-menu-pro-container,
#responsive-menu-pro-header,
button#responsive-menu-pro-button,
.edge-wrapper {
    -webkit-transition: 2.6s ease;
    -moz-transition: 2.6s ease;
    -ms-transition: 2.6s ease;
    -o-transition: 2.6s ease;
    transition: 2.6s ease;
    -ms-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -moz-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -o-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -webkit-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

#responsive-menu-pro-container.push-left,
#responsive-menu-pro-container.slide-left {
    -webkit-transform: translate3d(-800px, 0, 0);
    -moz-transform: translate3d(-800px, 0, 0);
    -ms-transform: translate3d(-800px, 0, 0);
    -o-transform: translate3d(-800px, 0, 0);
    transform: translate3d(-800px, 0, 0);
    -webkit-transform: translate(-800px, 0);
    -moz-transform: translate(-800px, 0);
    -ms-transform: translate(-800px, 0);
    -o-transform: translate(-800px, 0);
    transform: translate(-800px, 0);
}

.responsive-menu-pro-open #responsive-menu-pro-container.push-left,
.responsive-menu-pro-open #responsive-menu-pro-container.slide-left {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); 
 }

感谢您的时间和兴趣！