小程序弹窗动画

wxml代码如下

<view wx:if="{
  {markStatus}}" class='mark'>
  <view class='approval-box bottom-pos' animation="{
  {animationData}}">
    <view class='mark-title flex-sb plr30'>
      <view bindtap='cancelMark' class='fs28'>取消</view>
      <view class='fs28 colorQgreen'>确认</view>
    </view>
    <view class='mark-content plr30'>
       //自己的弹出内容
      </view>
    </view>
  </view>
</view>

wxss代码如下

.mark{
  position: fixed;
  background: rgba(0, 0, 0, .5);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
}
.bottom-pos{-webkit-transform:translateY(100%);transform:translateY(100%);}
.approval-box{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: #ffffff;
}

js代码如下

Pa