Taro微信小程序底部动画弹窗

// 蒙层部分
@keyframes slideBgUp {
  from {
    visibility: visible;
    background: transparent;
  }
  to {
    background: rgba(0,0,0,.7);
  }
}

@keyframes slideBgDown {
  from {
    background: rgba(0, 0 ,0 , .7);
  }

  to {
    background: transparent;
    visibility: hidden;
  }
}

.mask, .mask_down {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  animation: slideBgUp 0.3s ease-in both;
}

.mask_down {
  animation: slideBgDown 0.3s ease-in both;
}

// 内容部分
// 浏览器坐标系是y轴向下为正，x轴向右为正，z轴是屏幕到用户的眼睛的方向为正
@keyframes slideContentUp {
  from {
    // max-height: 0; 实现方法1，把内容最大高度设为0
    transform: translate3d(0, 100%, 0);  // 实现方法2，把内容整体向下移动
    // 此时其他的css中已经把内容容器定位到了底部
  }
  to {
    // max-height: 1000px;  设置足够的最大高度
    transform: translate3d(0, 0, 0);  // 把内容整体回到原来的状态
  }
}

@keyframes slideContentDown {
  from {
    transform: translate3d(0, 0, 0);
    // max-height: 1000px;
  }
  to {
    // max-height: 0;
    transform: translate3d(0, 100%, 0);
  }
}

.pop{
  animation: slideContentUp 0.3s ease-in both;
  position: absolute;
  bottom: 0;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}

.pop_down {
  animation: slideContentDown 0.3s ease-in both;
  position: absolute;
  bottom: 0;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}

示例1
{
	maskVisible ?
  (
	<View className={maskVisible ? styles.mask : styles.mask_down} 
	 onClick={this.changeVisible}>
     <View className={maskVisible ? styles.pop : styles.pop_down }>
       <ComonentContent onclick={this.changeVisible}/>
     </View>
    </View>
  ) : null
}

// 思考
// 上面的形式弹出时没有问题，但是弹回时就不会出现动画
// 因为maskVisible 控制着内容的挂载，为false时内容被直接卸载
// 所以不会出现弹回的动画
// 总述上面的是不完整的弹窗动画实现
// 知道了原因，笔者暂时想到有两种方法实现
// 第一种改变内容的显示模式
// 做出修改的关键部分
{
  <View className={maskVisible ? styles.mask : styles.mask_down} 
   // style={animaFlag ? {visibility: "hidden"} : ''}
   // 为了避免第一次加载时会出现动画效果
  style={animaFlag ? {visibility: "hidden"} : ''}
  onClick={this.changeVisible}>
    <View className={maskVisible ? styles.pop : styles.pop_down }>
      <ComonentContent onclick={this.changeVisible}/>
    </View>
  </View>
}

// 第二种
// 在示例1中通过动画时间判断是否把maskVisible 设置为false
// 比如弹回的动画时间为0.3s
// 可以通过setTimeout 的回调中把maskVisible 设置为false
// 由于比较复杂大家可以去试一下