在网络上切换幻灯片动画

Question

我正在尝试使用bootstrap 4（最终）toogle选项制作一个在网页其余部分上滑动的菜单，但问题是它一直忽略动画。

这是我的HTML：

<button type="button" data-toggle="collapse" data-target="#menu-mobile-div" aria-expanded="true">  
   Menu 
</button>
<br>

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 

<div id="menu-mobile-div" class="width collapse" aria-expanded="true">
  <div class="menu-mobile">
     ITEM1<br>
     ITEM2<br>
     ITEM3<br>
     ITEM4<br>
    <button class="pull-right" type="button" data-toggle="collapse" data-target="#menu-mobile-div" aria-expanded="true">  
      Menu       
    </button> 
  </div>
</div>

和css：

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

https://jsfiddle.net/xjhj1x23/3/

我注意到问题是div的“position：fixed”但我不知道如何解决它。