js下 移动端底部下拉菜单

a为要要上拉的菜单，b为点击按钮的部分，点击b，a与b一起上拉，再点击下退

abosolute下都为bottom：0px，a通过改变高度，b向上位移a的高度，二者的速度一样

在js中通过改变class

var k;
        $('#touch').onclick = function () {
           if(!k){
               $('#a').className="la";
               $('#b').className="bla";

               k=1;

           }
            else{
               $('#a').className="tui";
               $('#b').className="btui";
               k=0;
           }

        }

css：

上拉菜单部分：

.la{
    -webkit-animation: la 2s both linear ;
    animation: la 2s both linear ;
}


@-webkit-keyframes la{
    from{

    }
    to{
      height: 300px;
    }
}


.tui{
    -webkit-animation: tui 2s both linear ;
    animation: tui 2s both linear ;
}


@-webkit-keyframes tui{
    from{
        height: 300px;

    }
    to{
        height: 0px;
    }
}

按钮区域部分：

.bla{
    -webkit-animation: bla 2s both linear ;
    animation:bla 2s both linear ;
}


@-webkit-keyframes bla{
    from{
        bottom: 0;


    }
    to{
      bottom:300px;
    }
}