微信小程序弹出层动画

代码语言：javascript复制

<button bindtap="showModal">Click Me</button>
<view class="pop" wx:if="{{showPop}}">
    <view class="popbg" bindtap="hideModal"></view>
    <view class="popup" animation="{{animationData}}">内容</view>
</view>

代码语言：javascript复制

.popbg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 500rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
}

代码语言：javascript复制

Page({
    data: {
        showPop: false,
        animationData: {},
    },
    // 显示遮罩层
    showModal() {
        var animation = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease'
        })
        animation.translateY(500).step()
        this.setData({
            animationData: animation.export(),
            showPop: true
        })
        setTimeout(() => {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export(),
            })
        }, 50)
    },

    // 隐藏遮罩层
    hideModal() {
        var animation = wx.createAnimation({
            duration: 500,
            timingFunction: 'linear'
        })
        animation.translateY(500).step()
        this.setData({
            animationData: animation.export()
        })
        setTimeout(() => {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export(),
                showPop: false
            })
        }, 400)
    },
})

动画 微信小程序

0 人点赞