<!-- 气泡弹窗 -->

<view class="container" style="margin-top: 50px;">
  <view class="r_box {{showView ? 'r_box-show' : 'r_box-hide'}}" bindtap="show">1111</view>
  <button style="margin-top:50rpx;" bindtap="toggleView">点击</button>
</view>



Page({
  data:{
      showView:false
  },
  toggleView(){
    this.setData({
        showView:!this.data.showView
    });
  },
  show(){
    this.setData({
        showView: false
    });
  }
})


.r_box {
  width: 453rpx;
  background: #e4c1c1;
  border-radius: 14rpx;
  box-sizing: border-box;
  padding: 16rpx 28rpx 23rpx 29rpx;
  position: relative;
  margin-bottom: 60rpx;
}

.r_box::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 30rpx solid transparent;
  border-right: 30rpx solid transparent;
  border-top: 36rpx solid #e4c1c1;
  left: 50%;
  bottom: -50rpx;
  transform: translate(-50%,-50%);
}

.r_box-show {
  opacity:1;
  transition: all .4s;
}

.r_box-hide {
  opacity:0;
  transition: all .4s;
}