微信小程序底部弹框

<view wx:if="{{dialong}}" class="boxs {{dialong?'moves':''}} ">内容</view>

.dialong{

position: fixed;

width: 100%;

height: 100%;

z-index: 99;

top: 0;

background: rgba(0,0,0,0.4)

}

.boxs{

box-sizing: border-box;

width: 100%;

height: 500rpx;

position: fixed;

z-index: 999;

bottom: 0;

background: #fff;

padding: 30px 30px;

}

.moves {

animation-name: myfirst; /*动画的名称 */

animation-duration: 0.6s; /*动画从开始到结束的时间*/

animation-timing-function: ease-in-out; /*动画执行快慢的参数*/

}

@keyframes myfirst {

/*开始转的角度*/

from {

transform: translateY(500rpx);

} /*结束的角度*/

to {

transform: translateY(0px);

}

}