前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序弹出层动画

微信小程序弹出层动画

作者头像
明知山
发布2020-09-03 14:33:42
1.8K0
发布2020-09-03 14:33:42
举报
文章被收录于专栏:前端开发随笔
代码语言: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)
    },
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/05/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档