使用 jQuery 和 CSS3 在点击时翻译另一个 div答案

【问题标题】：Translate another div on click using jQuery and CSS3使用 jQuery 和 CSS3 在点击时翻译另一个 div
【发布时间】：2012-12-18 22:03:48
【问题描述】：

我正在尝试模仿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 属性的工作原理。我已经尝试阅读它，但我能找到的大多数示例都与将鼠标悬停在一个元素上并使其具有动画效果有关，而不是在单击另一个元素时对其进行操作。

提前感谢您的帮助！

【问题讨论】：

标签： jquery css click transform

【解决方案1】：

我确实错过了过渡持续时间！

    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;
}

瞧！

【讨论】：