CSS动画实现菜单栏从左边滑出

盗用一下图片吧：实际效果图如下：

1，有一个nav的侧边栏，有一个遮罩层，随着侧边栏打开，然后点击遮罩层关闭侧边栏

关键代码：

1.给slideNav（侧边栏设置如下属性）

.slideNav {
            position: absolute;
            left: -7rem;
            top: 0;
            width: 7rem;
            height: 100%;
            background: #555;
           transition: left linear .3s;
        }            

2.当点击显示菜单按钮的时候：

 btn.addEventListener('click', function () {
        mask.style.display = 'block';
        nav.style.left = 0;
    }, false);

3，当点击mask遮罩层：--菜单划出

 mask.addEventListener('click', function () {
        mask.style.display = 'none';
        nav.style.left = '-7rem';
    }, false)