I have two divs apart. By clicking on the button from left to left, it collapses to the left, leaving only the div on the right. Since the div on the right is 100% wide, it fills the space left after the left div is folded. The only problem is that when the div is compressed / there is a CSS transition, the right div disappears for a moment, and I cannot understand why.
HTML
<div>
<div id="demo" class="collapse show width">
<aside>
</aside>
</div>
<main>
<button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple horizontal collapsible
</button>
<div class="sample">
Some TExt
</div>
</main>
</div>
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;
display: block;
float: left;
}
.sample {
margin-top: 100px;
text-align: center;
}
main {
width: 100%;
height: 100vh;
background-color: pink;
display: inline;
}
DIRECT EXAMPLE
https://jsfiddle.net/djjvqtop/1/
This happens in all browsers. Is there any way to prevent this?
source
share