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)