CSS3转换/ Zepto toggleClass点击延迟

Question

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

的类

一切都在工作，但当点击按钮切换类时，我在移动设备上遇到了非常轻微的延迟。我已经得到它的工作使用动画没有延迟，但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');
})

Answer 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值，以使其工作)