微信弹出和隐藏遮罩层动画是小程序开发中非常重要的技能

• 关闭按钮图片

  
  
  del.png

• js

Page({
  data: {},
  onLoad: function () {

  },
  //打开透明层
  showRule: function () {
    this.setData({
      isRuleTrue: true
    })
  },
  //关闭透明层
  hideRule: function () {
    this.setData({
      isRuleTrue: false
    })
  },
})

• wxml

<text class='up' bindtap='showRule'>签到</text>
<view class="float {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
  <view class='floatContent'>
    签到成功!
    <image src='../../images/del.png' class='ruleHide' bindtap='hideRule'>X</image>
  </view>
</view>

• wxss

.up {
  display: block;
  border: 1px solid #148631;
  width: 100%;
  align-items: center;
  text-align: center;
  line-height: 60rpx;
  height: 80rpx;
  font-size: 30rpx;
  border-radius: 30rpx;
  margin-top: 20rpx;
  background:#00b26a;
}

.isRuleShow {
  display: block;
}

.isRuleHide {
  display: none;
}

.float {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgba(143, 126, 100, 0.521);
  z-index: 2;
  top: 0;
  left: 0;
}

.floatContent {
  padding: 20rpx 0;
  width: 90%;
  height: 500rpx;
  background:#b7b8b5 ;
  margin: 40% auto;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.ruleHide {
  height: 30rpx !important;
  width: 30rpx !important;
  position: absolute;
  top: 40rpx;
  right: 40rpx;
}

• 效果图

  
  
  image.png
  
  
  image.png