html 延迟div延迟消失,在CSS过渡期间Div消失了

我有两个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;

}

现场例子

这种情况发生在所有浏览器有办法防止这种情况吗？