实现右侧菜单过渡动画效果

**分享一下用原生的写法实现菜单动画效果
**在这里插入图片描述

实现这个拉伸动画的过程，废话不多说直接上代码

     <div class="leftNum" @click="setMenuWidth">
        <i class="el-icon-s-unfold" style="margin-top:20px"></i>
      </div>
    <div class="num" id="menuList">
     
    </div>
    ```

```css
#menuList {
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
}

```javascript
 setMenuWidth(){
      console.log(document.getElementById('menuList').offsetWidth,"width")
       if(document.getElementById('menuList').offsetWidth<=0){
       document.getElementById('menuList').style.width =  '210px'
       document.getElementsByClassName('leftNum')[0].style.right = '210px'
       }else{
       document.getElementById('menuList').style.width =  '0px'
       document.getElementsByClassName('leftNum')[0].style.right = '0px'
       }

蓝色方块代码

```css
.leftNum{
  height: 60px;
  width: 30px;
  position: absolute;
  top:45%;
  text-align: center;
  font-size: 18px;
  color: #fff;
  transition:right 1s;
-moz-transition:right 1s; /* Firefox 4 */
-webkit-transition:right 1s; /* Safari and Chrome */
-o-transition:right 1s; /* Opera */

  right: 210px;
  background: #6d86f3;
  z-index: 888;
  border-radius: 5px 0px 0px 5px;
  /* margin-right: 40px; */
}

由此就可以得到想要的动画效果了~