19.react动画---react-spring1.安装 yarn add react-spring 2.使用reac

1.安装 yarn add react-spring

2.使用react-spring,组件切换时有动画过度，如果组件被销毁后没有动画，必须保证组件一直存在

// 动画过度，组件一直存在，opacity为0隐藏
 <Spring from={{ opacity: 0 }} to={{ opacity: isHide ? 0 : 1 }}>
        {props => {
          // 说明遮罩层已经完成动画效果，隐藏了
          if (props.opacity === 0) {
            return null
          }

          return (
            <div
              style={props}
              className={styles.mask}
              onClick={() => this.onCancel(openType)}
            />
          )
        }}
      </Spring>

这里如果有遮罩层会导致页面无法点击，所以在子组件里面通过props.opacity进行mask的渲染，如果为0就不渲染

// 说明遮罩层已经完成动画效果，隐藏了
          if (props.opacity === 0) {
            return null
          }