我使用 toggleClass 在单击时将宽度从 10px 调整为 500px,部分是为了显示/隐藏内容。问题是,当转换发生时,可以看到 div 的内容重新排列,直到它们最终溢出并消失。
Javascript (jquery 2.1.1)
$( "#id" ).click(function() {
$( "div.login" ).toggleClass( "closed_div" );
});
CSS
* {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.div {
height: 10px;
width: 500px;
}
.closed_div {
overflow: hidden;
width: 10px;
}
HTML
<div class="div closed_div">
Content
</div>
最佳答案
只需在表单中添加white-space: nowrap;
为了让它变得更好,如果我是你,我也会在你的表单中添加不透明度 0,然后在打开不透明度 1 时有 0.5 秒的转换延迟,这样用户将永远不会在 div 完全打开之前看到表单。
关于javascript - 使用 toggleClass 在尺寸之间转换时如何停止 Div 中的元素重新排列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29411529/