微信小程序之过度效果

<view class="saixuan" catchtap='clickPup'>触发</view>
<view class='bianji {{productLeiShow ? "hover" : ""}}' hover-stop-propagation='true'>
	<view class="gaodu">出来</view>
</view>
<view catchtap='clickPup' class='bejingse {{productLeiShow ? "hover" : ""}}'></view>

  // 用户点击显示弹窗 
  clickPup: function () {
    var that = this;
    var productLeiShow = that.data.productLeiShow;
    if (productLeiShow) {
      that.setData({
        productLeiShow: 0,
      })
    } else {
      that.setData({
        productLeiShow: 1,
      })
    }
  },

.saixuan{
  width: 300rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bianji {
  width: 100%;
  position: fixed;
  left: 0rpx;
  top: 0rpx;
  z-index: 999;
  background-color: #fff;
  border-radius: 0 0 40rpx 40rpx;
  visibility: hidden;
  transition: 0.5s;
  margin-top: -100%;
  padding-bottom: 40rpx;
}
.bianji.hover {
  visibility: visible;
  margin-top: 0;
}
.gaodu{
  height: 200rpx;
}
.bejingse {
  position: fixed;
  left: 0rpx;
  top: 0rpx;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  visibility: hidden;
  transition: 0.5s;
}

.bejingse.hover {
  visibility: visible;
}

到下面的样式中间会有个过度效果