CCS3过渡和jQuery toggleClass溢出:隐藏不起作用

Question

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

如果我使用jQuery toggleClass上的包装容器溢出:隐藏，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而不是visibility

.hidden {
    display:none
}