关于javascript：在使用toggleClass切换尺寸时如何在Div重排中停止项目

How to stop items in Div rearranging when transitioning between sizes with toggleClass

我使用toggleClass在单击时将div的大小从10px调整为500px，部分显示/隐藏内容。问题是，当过渡发生时，可以看到div的内容重新排列，直到它们最终溢出并消失。

Javascript(jquery 2.1.1)

1
2
3

$("#id" ).click(function() {
$("div.login" ).toggleClass("closed_div" );
});

的CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

* {
-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

Content