微信小程序怎么实现弹出和隐藏遮罩层动画

这篇文章主要介绍“微信小程序怎么实现弹出和隐藏遮罩层动画”，在日常操作中，相信很多人在微信小程序怎么实现弹出和隐藏遮罩层动画问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序怎么实现弹出和隐藏遮罩层动画”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

train.wxml

<view class='train_con'> <view class='head'> <text>{{bankname}}</text> <text class='count'>{{index+1}}/{{allquestion.length}}</text> </view><view bindtouchstart="touchStart" bindtouchend="touchEnd" style='width:100%;height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;'> <view class='question_view'> <text class='question_text'>{{questionlist.question}}</text> <view class='option_view' data-id="A" bindtap="changeColor"> <view class="letter_view {{letterid=='A'?'active':''}} {{errorid=='A'?'error':''}}"> <text class='letter'>A</text> </view> <view class='option_text_view' > <text class='option_text'>{{questionlist.choiceA}}</text>  </view> </view> <view class='option_view'  data-id='B' bindtap="changeColor"> <view class="letter_view {{letterid=='B'?'active':''}} {{errorid=='B'?'error':''}}"> <text class='letter'>B</text> </view> <view class='option_text_view'> <text class='option_text'>{{questionlist.choiceB}}</text> </view> </view> <view class='option_view'  data-id='C' bindtap="changeColor"> <view class="letter_view  {{letterid=='C'?'active':''}} {{errorid=='C'?'error':''}}"> <text class='letter'>C</text> </view> <view class='option_text_view'> <text class='option_text'>{{questionlist.choiceC}}</text> </view> </view> <view class='option_view'  data-id='D' bindtap="changeColor"> <view class="letter_view {{letterid=='D'?'active':''}} {{errorid=='D'?'error':''}}"> <text class='letter'>D</text> </view> <view class='option_text_view'> <text class='option_text'>{{questionlist.choiceD}}</text> </view> </view>  </view><!-- 答案解析 --> <view> <view class="analysis_view {{clickcheckid==1?'checked2':''}}"> <text>参考答案：{{questionlist.answer}}\n参考解析：{{questionlist.analysis}}</text> </view> </view>  <view class="checkanswer_view {{clickcheckid==1?'checked':''}}" bindtap='checkanswer_click'> <text>查看答案</text> </view> </view><!-- 透明遮盖层，用于退出评分层 --> <view  bindtap="hideModal" animation="{{animationData}}" class="touming_top" wx:if="{{showModalStatus}}">  </view>  <!-- 评分遮盖层 --><view animation="{{animationData}}" class="container-column buydes-dialog-container" wx:if="{{showModalStatus}}">  <view class="buydes-dialog-container-top">这道题对你有用吗？评个分吧</view>  <view class="container-column buydes-dialog-container-bottom">  <!-- 评分 --> <block wx:for="{{stars}}"> <image class="star-image" style="left: {{item*80+185}}rpx" src="{{key > item ?selectedSrc : nORMalSrc}}"> <view class="item" style="left:0rpx" data-key="{{item+1}}" bindtap="selectRight"></view> </image> </block>  <view class="mark_btn" bindtap='mark_click'> <text>确定</text> </view> </view>  </view><!-- 透明遮盖层，用于退出评分层 --> <view  bindtap="hideModal" animation="{{animationData}}" class="touming" wx:if="{{showModalStatus}}">  </view> <!-- 底部栏 --> <view class='leftandright'> <view class='bottom_view' bindtap="showModal" > <image class="bottom_image" src='../images/score.png'></image> </view> <view class='bottom_view' bindtap='nextquestion_click'> <image class="bottom_image" src='../images/comment.png'></image> </view>  <button style="color: #fff; width: 80rpx;height: 80rpx;background-color: #fff;padding:0rpx;          margin-left:0rpx;margin-right:0rpx;padding-left:0px;padding-right:0px;" id="shareBtn"               open-type="share" class='share_btn'> <image class="bottom_image" src='../images/share.png'></image> </button>  </view></view>

train.js

var interval = "";//周期执行函数的对象var time = 0;//滑动时间var touchDot = 0;//触摸时的原点var flag_hd = true;//判定是否可以滑动let animationShowHeight = 300;//动画偏移高度Page({   data: { // 遮罩层变量    animationData: "",    showModalStatus: false,    imageHeight: 0,    imageWidth: 0, // 评分变量    stars: [0, 1, 2, 3, 4],//评分数值数组    normalSrc: '../images/score.png',//空心星星图片路径    selectedSrc: '../images/fullstar.png',//选中星星图片路径    key: 0,//评分  }, //点击星星  selectRight: function (e) { var key = e.currentTarget.dataset.key    console.log("得" + key + "分") this.setData({      key: key    })  }, // 确定评分  mark_click: function () { this.hideModal()  }, // 显示遮罩层    showModal: function () { //创建一个动画实例animation。调用实例的方法来描述动画。 var animation = wx.createAnimation({      duration: 500,         //动画持续时间500ms      timingFunction: "ease",//动画以低速开始，然后加快，在结束前变慢      delay: 0               //动画延迟时间0ms    }) this.animation = animation //调用动画操作方法后要调用 step() 来表示一组动画完成    animation.translateY(animationShowHeight).step()//     在Y轴向上偏移300 this.setData({ //通过动画实例的export方法导出动画数据传递给组件的animation属性。      animationData: animation.export(),      showModalStatus: true //显示遮罩层    })    setTimeout(function () {      animation.translateY(0).step() this.setData({        animationData: animation.export()      })    }.bind(this), 1)  }, // 隐藏遮罩层    hideModal: function () { var animation = wx.createAnimation({      duration: 500,      timingFunction: "ease",      delay: 0    }) this.animation = animation;    animation.translateY(animationShowHeight).step() this.setData({      animationData: animation.export(),    })    setTimeout(function () {      animation.translateY(0).step() this.setData({        animationData: animation.export(),        showModalStatus: false      })    }.bind(this), 200)  }, // 评分按钮  score_click: function () {   },   onLoad: function (options) {   },   onReady: function () {  },   onShow: function () {    flag_hd = true;    //重新进入页面之后，可以再次执行滑动切换页面代码    clearInterval(interval); // 清除setInterval    time = 0;    let that = this;    wx.getSystemInfo({      success: function (res) {        animationShowHeight = res.windowHeight;      }    })  },   onHide: function () {  },   onUnload: function () {  },   onPullDownRefresh: function () {  },   onReachBottom: function () {  },   onShareAppMessage: function () {  },})

train.wxss

page {  background-color: #fff;}.share_btn::after {  border: none;}.buydes-dialog-container {  width: 100%;  height: 300rpx;  justify-content: space-between;  background-color: #fff;  position: fixed;  bottom: 101rpx;   border-top: 1rpx solid #e8e8e8;}.buydes-dialog-container-top {  height: 100rpx;  padding-top: 20rpx;  display: flex;  justify-content: center;  flex-grow: 1;  font-size: 32rpx;  color: #737373;}.buydes-dialog-container-bottom {  height: 150rpx;  padding-top: 20rpx;  background-color: #fff;  display: flex;  justify-content: center;  flex-grow: 0;}.star-image {  position: absolute;  top: 100rpx;  width: 60rpx;  height: 60rpx;  src: "../../images/score.png";}.item {  position: absolute;  top: 0rpx;  width: 60rpx;  height: 60rpx;}.mark_btn {  width: 100%;  height: 100rpx;  background-color: #fff;  color: #55c5ac;  display: flex;  justify-content: center;  align-items: center;  border-top: 1rpx solid #eaeaea;  margin-top: 60rpx;  margin-bottom: 150rpx;  font-size: 32rpx;}.touming_top {  width: 100%;  height: 900rpx;  opacity: 0;  position: fixed;  bottom: 402rpx;  z-index: 998;}.touming {  width: 100%;  height: 101rpx;  opacity: 0;  position: fixed;  bottom: 0rpx;  z-index: 998;}

到此，关于“微信小程序怎么实现弹出和隐藏遮罩层动画”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！