javascript - 使用 toggleClass 在尺寸之间转换时如何停止 Div 中的元素重新排列

Question

我使用 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>

Answer 1

只需在表单中添加white-space: nowrap;

为了让它变得更好，如果我是你，我也会在你的表单中添加不透明度 0，然后在打开不透明度 1 时有 0.5 秒的转换延迟，这样用户将永远不会在 div 完全打开之前看到表单。