Taro React组件开发（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】

1. 遮罩层组件需求分析

1. 常规的遮罩层，就是使用变量判断显示和隐藏；
2. 渐入渐出动画遮罩层需要再原有遮罩层的基础上添加渐入渐出动画效果；
3. 渐入渐出的本质就是对 opacity 的值的控制。

2. 常规遮罩层实现

2.1 代码逻辑分析

1. 传入组件的主要参数：isOpened控制是否显示、zIndex遮罩层的层级、opacity遮罩层的透明度、position内容的显示位置；
2. 遮罩层布局实现，第一层为遮罩层的容器、第二层为遮罩层背景显示层、第三层是遮罩层中内容的显示位置；
3. 注意：必须在第一层和第三层添加组织冒泡事件onClick={e => {e.stopPropagation();return;}}；【防止第二层点和内容的点击事件冒泡执行，导致遮罩层的异常！】
4. 第二层绑定执行点击遮罩层，关闭遮罩层事件onHide。

2.2 代码实现

2.2.1 HTML 布局实现

render () { 
    let {
      zIndex,
      opacity,
      position = "center",
      isOpened,
      children,
    } = this.props;
    let { animShow } = this.state;
    return 
      {
        isOpened ?
    
1
2
3
4
5
6
7
8
9
10
11
12