根据状态显示时在组件上对动画进行淡入淡出

Question

目的是在显示地图之前显示微调框，该地图加载了2次提取。我做到了，但是我发现地图的显示太残酷了。因此，我想在加载程序后以渐隐效果显示它。我尝试了“ react-addons-css-transition-group”，但没有任何反应，我没有任何淡入淡出效果。这是我的代码（仅是有趣的部分）：

我的全球回报：

return(
        <div style={wrapperStyles}>
          <Header userFirstName={this.state.userFirstName} userName={this.state.userName} />
          <ModalCountry ref={this._child} modalTitle={this.state.modalTitle} />
          <div           
            onWheel={event => {
              if(event.nativeEvent.wheelDelta > 0 && event.ctrlKey === true)
              {
                event.preventDefault()
                this.handleZoomIn()
              }
                    else if(event.ctrlKey === true){
                    event.preventDefault()
                    this.handleZoomOut()
                    }
            }}>
            <div style={{width: "10%"}}> 
              <button data-tip="Utilisez Ctrl + molette de la souris pour plus d'ergonomie !" onClick={() => this.handleZoomOut()}><FontAwesomeIcon icon="search-minus" /></button>
              <button data-tip="Utilisez Ctrl + molette de la souris pour plus d'ergonomie !" onClick={() => this.handleZoomIn()}><FontAwesomeIcon icon="search-plus" /></button>
            </div>
            {this.state.mapLoading ? loader : null}
            {this.state.mapLoading ? notMapView : mapView}
          </div>
        </div>
      )

应该具有淡入淡出效果的mapView变量：

var mapView =
      <ReactCSSTransitionGroup
        transitionName="example"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={300}>
        <div className="mapView">
          <ComposableMap
              projectionConfig={{
              scale: 175,
            }}
            width={980}
            height={425}
            style={{
              width: "100%",
              height: "auto",
            }}
          >                     
            <ZoomableGroup center={[0,20]} zoom={this.state.zoom}>
              <Geographies geography={this.state.countries} disableOptimization>
                {(geographies, projection) => geographies.map((geography, i) => geography.id !== "ATA" && (
                <Geography
                  className="Geography"
                  key={i}
                  onClick={() => this.openModalBox(geography)}
                  geography={geography}
                  data-tip={geography.properties.name}
                  projection={projection}
                  style={
                    {
                      default: {
                        fill: this.countryColor(geography),
                        stroke: this.countryColorStroke(geography),
                        strokeWidth: 0.30,
                        outline: "none"
                      },
                      hover: {
                        fill: "#607D8B",
                        stroke: "#607D8B",
                        strokeWidth: 0.75,
                        outline: "none",
                        cursor: "pointer"
                      },
                      pressed: {
                        fill: "#FFFFFF",
                        stroke: "#FFFFFF",
                        strokeWidth: 0.75,
                        outline: "none",
                      },
                    }
                  }
                />
                ))}
              </Geographies>
              </ZoomableGroup>
            </ComposableMap>
          </div>
          <ReactTooltip />
        </ReactCSSTransitionGroup>

我的notMapView变量：

**var notMapView =
  <ComposableMap
    projectionConfig={{
      scale: 175,
    }}
    width={980}
    height={425}
    style={{
      width: "100%",
      height: "auto",
    }}
  >
    <ZoomableGroup center={[0,20]} zoom={this.state.zoom}>
    </ZoomableGroup>                     
  </ComposableMap>**

我的加载程序变量：

var loader = 
  <div className="loader">
    <Loader
      type="Plane"
      color="rgba(255, 255, 255, 0.8)"
    >
    </Loader>
  </div>

我添加了CSS，就像文档中所说的那样：

.example-enter {
    opacity: 0.01;
  }

  .example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
  }

  .example-leave {
    opacity: 1;
  }

  .example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
  }

除fadeIn动画外，其他所有工具都工作正常。