<div class="outerDiv">
<div class="popInner">
<div class="optionOne">选项一</div>
<div class="optionTwo">选项二</div>
<div class="cancel">取消</div>
</div>
</div>
.outerDiv{
display: none;
width: 100%;
height: 158px;
position: fixed;
bottom: -158px;
color: rgb(27, 135, 254);
font-size: 16px;
z-index: 999;
background-color: white;
border-radius: 20px 20px 0 0;
}
.popInner{
width: 100%;
margin: 0 auto;
border-radius: 10px;
background-color: white;
}
.optionOne,.optionTwo,.cancel{
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
.outerDiv_block {
bottom: 0;
animation: myMoveBlock 0.2s linear;
animation-fill-mode: forwards;
}
.outerDiv_hide {
bottom: -200px;
animation: myMoveHide 0.2s linear;
animation-fill-mode: forwards;
}
@keyframes myMoveBlock {
from {
bottom: -180px;
}
to {
bottom: 0px;
}
}
@keyframes myMoveHide {
from {
bottom: 0px;
}
to {
bottom: -180px;
}
}
$('.outerDiv').show().removeClass('outerDiv_hide').addClass('outerDiv_block');
$('.outerDiv').removeClass('outerDiv_block').addClass('outerDiv_hide');