title: Customizing the collapse transition in bootstrap 4
body: <p>Bootstrap 4 uses the class <code>.collapsing</code> to animate the width/height of an .collapse-element while opening/closing it. Unfortunately the actual change is approached by adding the width/height as an inline style to the element and adding and removing the class at the start and end of the transition. Therefore it's quite hard to customize the transition (e.g. change timing or fade in/out instead of width transition).</p>
  
  <p>What I've tried so far:</p>
  
  <ul>
  <li>Adding the css property <code>transition:none</code> to the <code>.collapsing</code> class: This does help get rid of the transition but opening/closing is still delayed by the transition time, since the class still gets added for a few millis before the actual change takes place.</li>
  <li>Adding custom css keyframes to the <code>.collapsing</code> class: Since the same class is used for opening and closing, the same animation is shown for both.</li>
  </ul>
  
  <p>Is there any way to change the transition e.g. to fade in/out (change of opacity) or do I have to build a custom version of the bootstrap.js? </p>