title: Bootstrap 4 collapse has delay
body: <p>I'm creating offcanvas navigation menu on mobile view and I have encountered a problem where there is like 0.3s delay before adding class .show.</p>
  
  <p></p>
  
  <p>I tried adding custom class .active via jquery but results are the same - even tho that class is added without delay, transition on this class is still delayed. </p>
  
  <pre><code>.collapse.active{
    transform: translateX(0%);
  }
  </code></pre>
  
  <p>That's most likely caused by adding and calculating inline style height that I don't really need as i alyways want nav to be 100vh. Is there a way to cut or speed up the calculating part?</p>
  
  <p>Tried adding this code but doesn't help at all.</p>
  
  <pre><code>.collapsing {
  -webkit-transition: all 0s ease-out;
  -o-transition: all 0s ease-out;
  transition: all 0s ease-out;
  height:0 !important;
  display: none;
  }
  </code></pre>
  
  <p><strong>Bootply link (with delay): <a href="https://www.bootply.com/9dFOT7Q2Ct" rel="nofollow noreferrer">https://www.bootply.com/9dFOT7Q2Ct</a></strong></p>
  
  <p>I did same thing on codepen and there it works just fine - It doesnt even add inline style to #navbarNav so maybe a jquery issue (I'm using recommended jquery-3.2.1)</p>
  
  <p><strong>Codepen link (without delay for some reason): <a href="https://codepen.io/janheder/pen/rGLJLb" rel="nofollow noreferrer">https://codepen.io/janheder/pen/rGLJLb</a></strong></p>