底部弹出

项目中做了一个底部弹出，记录在此。

css：

html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: #fff;
text-align: center;
}

.div-lianxi{
position: fixed;
bottom: 0;
height: 40px;
background-color: #00B1D7;
width: 100%;
overflow: hidden;
color: white;
}
.div-foot {
background-color: #00B1D7;
color: white;
width: 100%;
font-size: small;
font-family: "MicrosoftYaHeiUI";
margin: 0;
padding: 5px;
}
.div-foot div {
padding-left: 5px;
padding: 10px auto;
}

.f-xl{
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 100%;

font-size: 30px;
line-height: 40px;
}
.div-top{
  border-style: solid;
            border-width: 20px 20px 20px 20px;
            border-color: transparent transparent white transparent;
            width: 0px;
            height: 0px;
            margin-top: -20px;
            transform:rotate(0deg);
}
 .img1 {
           transition: All 0.4s ease-in-out;
           -webkit-transition: All 0.4s ease-in-out;
           -moz-transition: All 0.4s ease-in-out;
           -o-transition: All 0.4s ease-in-out;
        }

html：

<div class="div-lianxi" id="foot" >
<div class="f-xl" οnclick="openlx()">
<span id="">
联系我们
</span>
<div class="div-top img1">
</div>
</div>

<div class="f-img">
<img src="img/QQ.png"/>
<img src="img/WX.png"/>
</div>


<div  class="div-foot">
<p>联系电话 ：027-123456</p>
<p>联系地址 ：广东省广州市白云区丛云路982号金癸大夏</p>
<p>©2012-2028 没朋友科技 粤ICP备12056521号-7</p>
</div>

</div>

js：

<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var open = true
function openlx(){
var head = $(".f-xl").height();
var foot = $(".f-img").height();
var foot2 = $(".div-foot").height();
if(open){
$("#foot").animate({height:head + foot + foot2 + 50});
$(".div-top").css({'transform':'rotate(180deg)','margin-top': '20px'}); 
open = !open;
}else{
$("#foot").animate({height:head});
$(".div-top").css({'transform':'rotate(0deg)','margin-top': '-20px'});    
open = !open;
}
}

</script>

样式比较丑代码也没有整理