js下 移动端底部下拉菜单

js下 移动端底部下拉菜单_第1张图片

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;
    }
}


你可能感兴趣的:(经验总结)