0

我正在尝试模仿http://mashable.com/上可爱的移动菜单实现（缩小浏览器的宽度以查看左上角的菜单按钮，然后单击它）。

基本上，我有一个按钮（#slide-menu）。页面内容的其余部分包含在一个“#nudge”div 中，当单击按钮时，我想向右滑动 250 像素。

jQuery('#slide-menu').click(function() {
        jQuery('#nudge').css('-webkit-transform', 'translate(250px, 0)');
        jQuery('#mobile-menu').css('display', 'block');
    });

#mobile-menu 包含从屏幕左侧弹出的导航。此代码有效，但没有平滑过渡。内容只是弹出到右侧并出现菜单，但没有任何延迟来提供像 mashable 上的平滑幻灯片。我也尝试切换一个类而不是使用 .css() 来允许多个前缀，但运气更差。

我不确定我是否误解了 transform 属性的工作原理。我已经尝试阅读它，但我能找到的大多数示例都与将鼠标悬停在一个元素上并使其具有动画效果有关，而不是在单击另一个元素时操纵元素。

提前感谢您的帮助！

4

1 回答 1

0

我确实错过了过渡时间！

    jQuery('#slide-menu').click(function() {
        jQuery('#nudge').toggleClass('slide-menu');
    });

和CSS：

.slide-menu{
    transform: translate(180px, 0);
    -ms-transform: translate(180px, 0);
    -moz-transform: translate(180px, 0);
    -webkit-transform: translate(180px, 0);
    -o-transform: translate(180px, 0);
    -webkit-transition-duration: 1s;
}

瞧！

于 2012-12-19T20:07:59.080 回答