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值才能工作。）

CSS3 transisitions / Zepto toggleClass单击延迟

1 个答案: