Div fades during CSS transition

Question

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><!--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>

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;
}

DIRECT EXAMPLE

https://jsfiddle.net/djjvqtop/1/

This happens in all browsers. Is there any way to prevent this?

Answer 1

, overflow: hidden #demo. 0, , float. .collapsing overflow: hidden, , float. , #demo.collapsing <aside>, <main> .

, #demo .