我有两个divs彼此相邻.单击一个按钮,左边的div向左折叠,只留下右边的div.由于右边的div是宽度:100%;它填充了折叠的左div留下的空间.唯一的问题是,当div崩溃/ CSS过渡正在进行时,正确的div消失片刻,我无法弄清楚原因.
simple horizontal collapsible
Some TExt
CSS
html {
height: 100%
}
body {
height: 100%;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
background: gray;
}
a {
color: #00B7FF;
}
.collapse {
visibility: hidden;
}
.collapse.show {
visibility: visible;
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.45s;
transition-duration: 0.45s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.collapsing.width {
-webkit-transition-property: width, visibility;
transition-property: width, visibility;
width: 0;
height: auto;
}
aside {
height: 100vh;
width: 250px;
background-color: white;
/*border-right:1px solid black;*/
display: block;
float: left;
}
.sample {
margin-top: 100px;
text-align: center;
}
main {
width: 100%;
height: 100vh;
background-color: pink;
display: inline;
}
现场例子
这种情况发生在所有浏览器有办法防止这种情况吗?