When I have two divs positioned alongside each other, and one collapses to the left upon clicking a button, the remaining div on the right fills the available space due to its width being set at 100%. However, during the collapsing transition, the right div momentarily disappears. I am trying to understand why this happens.
Here is the HTML code:
<div>
<div id="demo" class="collapse show width">
<aside>
</aside>
</div><!--COLLAPSE-->
<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>
Here is the CSS code:
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;
}
Here is a live example for reference: https://jsfiddle.net/djjvqtop/1/
This issue is consistent across all browsers. I'm seeking a solution to prevent the momentary disappearance of the right div during the collapse transition.