react-spring动画库

概述

场景：实现动画效果，增强用户体验
react-spring是基于spring-physics（弹簧物理）的react动画库，动画效果更加流畅、自然
优势：
- 几乎可以实现任意UI动画效果
- 组件式使用方式（render-props模式），简单易用，符合react的声明式特性，性能高
github地址
官方文档

基本使用

安装： yarn add react-spring
打开Spring组件文档
导入Spring文档，使用Spring组件包裹要实现动画效果的遮罩层div
通过render-props模式，讲参数props设置为遮罩层div的style
给Spring组件添加from属性，指定：组件第一次渲染时的动画状态
给Spring组件添加to属性，指定：组件要更新的新动画状态
props就是透明度有0~1中变化的值

实现遮罩层动画

创建方法 renderMask来渲染遮罩层 div
修改渲染遮罩层的逻辑，保证Spring组件一直都被渲染（Spring组件被销毁了，就无法实现动画效果）
修改to属性的值，在遮罩层隐藏时为0，在遮罩层展示为1
在render-props的函数内部，判断props.opacity是否等于0
如果等于0，就返回null，解决遮罩层遮挡页面导致顶部点击事件失效
如果不等于0，渲染遮罩层div

renderMask() {
    const { openType } = this.state

    const isHide = openType === 'more' || openType === ''

    return (
      <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>
    )