小程序弹出层动画

wxml

---

<view class="modals modals-bottom-dialog" bindtap="hideModal" wx:if="{ {value}}">

<view class="modals-cancel" ></view>

<view class="bottom-dialog-body bottom-pos" animation="{ {animationData}}"></view>

</view>

<button bindtap="showModal">点我</button>

wxss

---

/*模态框*/

.modals{position:fixed; z-index: 999; top:0; left: 0; right:0; bottom: 0;}

.modals-cancel{position:absolute; z-index:1000; top:0; left: 0; right:0; bottom: 0; background-color: rgba(0,0,0,.5);}

.bottom-dialog-body{position:absolute; z-index:10001; bottom:0; left:0; right:0; padding:30rpx; height:300rpx; background-color: #fff;}

/*动画前初始位