0

我正在尝试使用 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');
})
4

1 回答 1

0

这很可能是 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 值才能工作。）

于 2013-09-05T21:28:01.243 回答