CSS部分

body,div,ul,li,span,i{margin: 0; padding: 0;}
        ul{list-style: none;}

        body {
            font-family: 'Microsoft YaHei','Open Sans', 'trebuchet ms', arial, sans-serif;
            font-size: 12px;
        }

        #sidebar {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100;
            min-height: 100%;
            width: 35px;
            padding-top: 200px;
            background-color: #e1e1e1;
        }

        .item{
            margin-top: 5px;
            text-align: center;
        }

        #closeBar{
            position: absolute;
            left: 0;
            bottom: 30px;
            width: 35px;
            text-align: center;
            cursor: pointer;
        }

        .nav-content {
            position: absolute;
            z-index: 99;
            min-height: 100%;
            width: 170px;
            opacity: 0;
            filter: alpha(opacity=0);
            text-align: center;
            background-color: #e1e1e1;
        }

        .nav-con-close {
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
        }

        .sideBar-move-left{animation: sml 1s 1 forwards;}

        @keyframes sml{
            from{}
            to{
                transform: translateX(-120px);
            }
        }

        .closeBar-move-right{animation: cmr 1s 1 forwards;}

        @keyframes cmr{
            from{}
            to{
                transform: translateX(160px) rotate(405deg) scale(1.5);
            }
        }

        .sideBar-move-right{animation: smr 1s 1 forwards;}

        @keyframes smr{
            from{}
            to{
                transform: translateX(120px);
            }
        }

        .closeBar-move-left{animation: cml 1s 1 forwards;}

        @keyframes cml{
            from{
                transform: scale(1.5);
            }
            to{
                transform: translateX(-160px) rotate(-405deg) scale(1);
            }
        }

        .menuContent-move-right{animation: mmr 1s 1 forwards;}

        @keyframes mmr{
            from{
                opacity: 0;
                filter: alpha(opacity=0);
            }
            to{
                opacity: 1;
                filter: alpha(opacity=100);
                transform: translateX(120px);
            }
        }

        .menuContent-move-left{animation: mml 1s 1 forwards;}

        @keyframes mml{
            from{
                opacity: 1;
                filter: alpha(opacity=100);
            }
            to{
                opacity: 0;
                filter: alpha(opacity=0);
                transform: translateX(-120px);
            }
        }

        .menuContent-move-up{animation: mmu 1s 1 forwards;}

        @keyframes mmu{
            from{
                opacity: 0;
                filter: alpha(opacity=0);
            }
            to{
                opacity: 1;
                filter: alpha(opacity=100);
                transform: translateY(-250px);
            }
        }

关闭sidebar时没有考虑内容栏的状态，代码如下：

是的呢，收获很大