微信小程序动画实现自定义底部弹出框

话不多说，先上效果图

1 首先，在js里写一个函数来实现简单的上滑和下滑动画

tapCoupon: function () {
        console.log(1);
        console.log(this.data.coupon_height)
        var ani = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease',
            delay: 0
        });
        if (!this.data.status) {
            ani.opacity(1).translate(0, -this.data.coupon_height).step()
            this.setData({
                animation: ani.export(),
                status: !this.data.status
            })
        } else if (this.data.status) {
            ani.opacity(1).translate(0, 0).step()
            this.setData({
                animation: ani.export(),
                status: !this.data.status
            })
        }
    },
        

2 接着，我们在wxml里这样写：

​ （1）在wxss里把盒子设为position:fixed;在来wxml里这样写

​ 注意：coupon_height 是通过js动态获取这个元素的高度，想知道如何获取盒子的高度请看微信小程序通过js动态获取节点信息

​ （2）在 2 处声明一个动画

3 点击完成，动画下滑

tapFinish: function () {
        var ani = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease',
            delay: 0
        });
        ani.opacity(1).translate(0, 0).step()
        this.setData({
            animation: ani.export(),
            status: !this.data.status
        })
    },