小程序 遮罩层 从下而上弹框

html:
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
    <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
        <view class="share">
            <view>
                <button data-id="shareBtn" open-type="share">
                    <view>微信好友</view>
                </button>
            </view>
            <view>
                <button bindtap="saveImg">
                    <view>保存手机</view>
                </button>
            </view>
        </view>
    </view>
css:
.commodity_screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0;
    overflow: hidden;
    z-index: 1000;
    color: #fff;
}

.commodity_attr_box {
    width: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background: #fff;
    padding-top: 44rpx;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.50);
}

.commodity_attr_box image {
    width: 96rpx;
    height: 96rpx;
}
.commodity_attr_box button{
    font-size:22rpx;
    font-family:Microsoft YaHei;
    font-weight:bold;
    color:rgba(51,51,51,1);
    padding: 10rpx 0;
}

js:
page({
	showModal: function() {
        // 显示遮罩层
        var animation = wx.createAnimation({
            duration: 100,
            timingFunction: "linear",
            delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
            animationData: animation.export(),
            showModalStatus: true
        })
        setTimeout(function() {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export()
            })
        }.bind(this), 200)
    },
    hideModal: function() {
        // 隐藏遮罩层
        var animation = wx.createAnimation({
            duration: 100,
            timingFunction: "linear",
            delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
            animationData: animation.export(),
        })
        setTimeout(function() {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export(),
                showModalStatus: false
            })
        }.bind(this), 200)
    },
})