title: Div disappears during CSS transition
body: <p>I have two divs beside one another. With the click of a button, the div on the left collapses to the left leaving only the div on the right.  Since the div on the right is width:100%;, it fills the space left behind by the collapsed left div.  The only problem is that while the div is collapsing/the CSS transition is in progress, the right div disappears for a moment and I can't figure out why.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
    &lt;div id="demo" class="collapse show width"&gt;
      &lt;aside&gt;
      &lt;/aside&gt;
    &lt;/div&gt;&lt;!--COLLAPSE--&gt;
  
    &lt;main&gt;
      &lt;button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;
        simple horizontal collapsible
      &lt;/button&gt;
      &lt;div class="sample"&gt;
        Some TExt
      &lt;/div&gt;
    &lt;/main&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>LIVE EXAMPLE</p>
  
  <p><a href="https://jsfiddle.net/djjvqtop/1/" rel="noreferrer">https://jsfiddle.net/djjvqtop/1/</a></p>
  
  <p>This occurs in all browsers. Is there a way to prevent this? </p>