title: toggle slide animation on top of web
body: <p>I'm trying to make a menu that slides on top of the rest of the web using bootstrap 4 (final) toogle options but the problem is it keeps ignoring the animation.</p>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;button type="button" data-toggle="collapse" data-target="#menu-mobile-div" aria-expanded="true"&gt;  
     Menu 
  &lt;/button&gt;
  &lt;br&gt;
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida volutpat odio id congue. Cras vitae faucibus nisl. Mauris neque lacus, tincidunt a orci sit amet, cursus malesuada lacus. Sed ornare metus et sem 
  
  &lt;div id="menu-mobile-div" class="width collapse" aria-expanded="true"&gt;
    &lt;div class="menu-mobile"&gt;
       ITEM1&lt;br&gt;
       ITEM2&lt;br&gt;
       ITEM3&lt;br&gt;
       ITEM4&lt;br&gt;
      &lt;button class="pull-right" type="button" data-toggle="collapse" data-target="#menu-mobile-div" aria-expanded="true"&gt;  
        Menu       
      &lt;/button&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>.menu-mobile {
      display: block;
      background-color: red;
      width: 256px;
      height: 500px;
      top: 0px;
      position: fixed;
      z-index: 9999;
  }
  
  .collapsing.width {
      -webkit-transition-property: width, visibility;
      transition-property: width, visibility;
      width: 0;
      height: 100%;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/xjhj1x23/3/" rel="nofollow noreferrer">https://jsfiddle.net/xjhj1x23/3/</a></p>
  
  <p>I noticed the problem is the "position: fixed" of the div but I don't know how to solve it.</p>