jquery - CCS3 转换和 jQuerytoggleClass 溢出 :hidden doesnt work

Question

我正在尝试制作一个从左侧滑入的菜单，并将其他所有内容推离 Canvas 70%。我还想在应用此操作时删除滚动。

如果我使用 jQuery 在带有溢出:隐藏的包装容器上切换Class，则 css 转换效果不起作用(除了在 IE10 中，它实际上起作用)。

这是一个非常简单的示例:jsfiddle

$('button').click(function () {
    $('#wrapper').toggleClass('hidden');
    $('#test').toggleClass('test');
    return false;
});

.hidden {
    overflow:hidden;
}
#test {
    position: absolute;
    left:-50px;
    transition: left 1s;
}
#test.test {
    left:100px;
}

如果我删除 $('#wrapper').toggleClass('hidden'); 行，它就会起作用。

有什么建议吗？

Answer 1

您应该添加display:none而不是可见性

.hidden {
    display:none
}