小程序 弹出动画（分享类）

点击分享弹出一个动画 出现分享类型

wxml:

<view>
    <view animation="{{animationData}}" class="buydes-dialog-container" wx:if="{{showModalStatus}}">
        <view class="buydes-dialog-container-top" bindtap="hideModal">
        </view>
        <view class="buydes-dialog-container-bottom">
            <view class="fl bottom-image-fen">
                <button open-type="share" hover-class="other-button-hover" class="button-bg">
                    <image src="../../img/weixin.png" style="width: 80rpx; height: 80rpx;" class="bottom-img"></image>
                    <view class="image-txt">发送好友</view>
                </button>
            </view>
            <view class="fl bottom-image-fen">
                <view style="margin-top: 5rpx;" bindtap="saveShareImg">
                    <image src="../../img/down.png" style="width: 60rpx; height: 60rpx;" class="bottom-img-right "></image>
                    <view class="image-txt">保存卡片</view>
                </view>
            </view>
            <view class="clear"></view>
            <view bindtap="hideModal" class="buydes-dialog-container-bottom-item" >取消</view>
        </view>
    </view>
    <image bindtap="showModal" bindload="imageLoad" style="width:200px;" src="../../img/xingli.png"/>
</view>

js:

let animationShowHeight = 300;
Page({
    data:{
        animationData:"",
        showModalStatus:false,
    },
    // 显示遮罩层
    showModal: function () {
        let that = this;
        let animation = wx.createAnimation({
            duration: 200,
            timingFunction: "linear",
        });
        that.animation = animation;
        animation.translateY(animationShowHeight).step();
        that.setData({
            animationData: animation.export(),
            showModalStatus: true
        });
        setTimeout(function () {
            animation.translateY(0).step();
            that.setData({
                animationData: animation.export()
            })
        }.bind(that), 200);

        that.setData({
            shareImgHidden: true,
        });
    },
     // 隐藏遮罩层
    hideModal: function () {
        let that = this;
        let animation = wx.createAnimation({
            duration: 200,
            timingFunction: "linear",
            delay: 0
        });
        that.animation = animation;
        animation.translateY(animationShowHeight).step();
        that.setData({
            animationData: animation.export(),
        });
        setTimeout(function () {
            animation.translateY(0).step();
            that.setData({
                animationData: animation.export(),
                showModalStatus: false
            })
        }.bind(that), 200);
    },

    onShow:function(){
        let that = this;
        wx.getSystemInfo({
            success: function(res) {
                animationShowHeight = res.windowHeight;
            }
        });
    },
});

wxss:

.buydes-dialog-container{
    width: 100%; height: 100%; background-color:rgba(15, 15, 26, 0.3); 
    position: fixed; z-index: 999;
}
.buydes-dialog-container-top { height: 80vh; }

.buydes-dialog-container-bottom { background-color: #ffffff; }

.buydes-dialog-container-bottom-item{
    background-color: #eeeeee; padding:24rpx; text-align: center; 
    border-bottom: 1rpx solid #eeeeee;
}
.bottom-img { border: 0; margin-bottom: -20rpx; }
button::after { border: 0; }
.button-bg {
    background-color: #ffffff; height: 160rpx; padding-top: 20rpx;
}
.bottom-image-fen { width: 50vw; }
.image-txt { line-height: 30rpx; text-align: center; font-size: 24rpx;}
.bottom-img-right {
    background-color: #3EBDFE; border-radius: 50rpx; padding: 10rpx; margin-top: 20rpx;
    margin-left: 20vw; margin-bottom: 5rpx;
}

参考： 微信小程序自定义对话框+弹出和隐藏动画详解