CSS3 过渡 / Zepto 切换类点击延迟答案

【问题标题】：CSS3 transisitions / Zepto toggleClass click delayCSS3 过渡 / Zepto 切换类点击延迟
【发布时间】：2023-04-04 06:46:01
【问题描述】：

我正在尝试使用 Zepto 动画和 CSS3 过渡来为 div 向左移动并在单击按钮时再次返回动画。为此，我使用 toggleClass 添加和删除样式为 margin-right:-0;

的类

一切正常，但是当我点击按钮切换课程时，我在移动设备上遇到了非常轻微的延迟。我已经使用 animate 无延迟地让它工作，但 CSS3 过渡是硬件加速的，所以我希望让动画稍微平滑一些。

基本上，当我单击按钮切换动画时，在它触发之前会有一个非常轻微的暂停，我想摆脱这个。

代码如下，有人知道我为什么会出现这种轻微的延迟吗？我的猜测是，这与切换类和读取样式的速度有关？

感谢任何帮助/见解！

#side-menu {
    float: right;
    height: 100%;
    width: 80%;
    overflow: scroll;
    margin-right:-1024px;
    box-shadow: 4px 0 5px #484848 inset;
    -webkit-box-shadow: 4px 0 5px #484848 inset;
    -moz-box-shadow: 4px 0 5px #484848 inset;
    background: linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    background: -webkit-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    background: -moz-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    background: -o-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    -webkit-transition: margin-right 1s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform: translateZ(0);
}

.sideMenuToggle{margin-right: 0 !important;}




$('#menu_toggle').on('click', function(){
    $('#side-menu').toggleClass('sideMenuToggle');
})

【问题讨论】：

我只是猜测它，所以可能是错误的。开始转换时菜单是否仍然可见。可能是 -1024px 设置的，不仅看不到，而且看不到，而且需要一些时间才能到达屏幕的边界？顺便说一句，您正在尝试使用 -webkit-transform 来获得 GPU 加速，但是为此设置 2 个属性是没有用的，只会应用一个。
你能做一个小演示吗？

标签： jquery css css-transitions zepto toggleclass

【解决方案1】：

这很可能是 vals 所说的：菜单在视线之外，而不是在视线之外。要修复它，您应该能够更改为margin-right: -80%。这样，margin-right 和 width 一样，刚好不在视野范围内。

现在填充、边框和阴影可能会导致它仍然显示一点。您可以通过将元素更改为box-sizing: border-box 来处理前两个，这将使width 表示包含的总宽度、填充和边框，并且它们的大小将从整个元素大小中减去。在此处了解更多信息：

http://css-tricks.com/box-sizing/

框阴影仍然会显示。所以，也为它们制作动画！添加transition: box-shadow 1s 并以box-shadow: 4px 0 5px rgba(0,0,0,0) 开头，然后将box-shadow: 4px 0 5px #484848 添加到您的sideMenuToggle 类中。

希望对您有所帮助！

（PS 这些都没有经过测试，所以我什至不确定您是否可以为盒子阴影设置动画。您应该可以，但您可能需要将 #484848 转换为 RGBA 值才能使其工作。）

【讨论】：