CSSTransitionGroup无效

Question

在我的项目中，我有一个元素，其中包含页面的所有内容。它的类名是＆＃39;页面包装器＆＃39;。现在，我有一个导航栏，其中包含指向应用程序中不同部分的链接。我希望每次点击一个链接，我希望页面包装器淡入而不是立即加载。

我读到了关于CSSTransitionGroup的内容，但它对我来说根本不起作用。 这是我的主要组件的代码：

/**
 *
 * LoadingProvider
 *
 */

import React from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { CSSTransitionGroup } from 'react-transition-group';
import LoadingScreen from '../../components/LoadingScreen';
import Navbar from '../../components/Navbar';
import Footer from '../../components/Footer';
import BidsCart from '../../components/BidsCart';
import MazalModal from '../../components/MazalModal';
import { selectMainDomain } from './selectors';

export class LoadingProvider extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);

    this.state = {
      darkThemed: ['/about'],
    };
  }

  render() {
    const { isLoading, isMazalShown, newBid, location } = this.props;
    const { darkThemed } = this.state;
    const { pathname } = location;
    return (
      <div>
        <CSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          <div key={0} className="page-wrapper">
            <Navbar
              path={pathname}
              dark={darkThemed.includes(pathname)}
            />
            <MazalModal />
            {isMazalShown ?
              <MazalModal
                isMazalShown={isMazalShown}
                newBid={newBid}
              />
            : null}
            {isLoading ? <LoadingScreen /> : null}
            {this.props.children}

            <BidsCart />
            <Footer />
          </div>
        </CSSTransitionGroup>
      </div>
    );
  }
}

LoadingProvider.propTypes = {
  location: PropTypes.object,
  isLoading: PropTypes.bool,
  isMazalShown: PropTypes.bool,
  newBid: PropTypes.object,
  children: PropTypes.object.isRequired,
};


const mapStateToProps = selectMainDomain;
const withConnect = connect(mapStateToProps, null);

export default compose(
  withConnect,
  withRouter,
)(LoadingProvider);

这是global-styles.js文件（我使用react-boilerplate）：

import { injectGlobal } from 'styled-components';

/* eslint no-unused-expressions: 0 */
injectGlobal`
  @import url('https://fonts.googleapis.com/css?family=Assistant:400,600,700,800');

  html {
    height: 100%;
    width: 100%;
  }

  body {
    min-height: 100%;
    position: relative;
    padding-bottom: 130px;
    overflow-x: hidden;
    font-family: 'Assistant', sans-serif;
    user-select: none;
    letter-spacing: -0.6px;
  }

  body form input {
    font-family: 'Assistant', sans-serif;    
  }

  body.fontLoaded {
    font-family: Assistant;
  }

  #app {
    background-color: #ffffff;
    min-height: 100%;
    min-width: 100%;
  }

  body::-webkit-scrollbar {
    width: 0.6em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

.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;
}

@keyframes fadeanimation {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 300ms all;
}

.modal {
  position: absolute;
  width: 586px;
  height: 477px;
  top: 14%;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 40px;
  border-radius: 6px;
  background-color: #f3f8fb;
  border: solid 1px rgba(0, 0, 0, 0.1);
  outline: none;
}

.modal .close-modal {
  position: absolute;
  right: 0;
  top: 0;
  outline: none;
  cursor: pointer;
  margin: 5px 6px;
}

.modal .close-modal svg {
  width: 11px;
  fill: #1b2e44;
  fill-opacity: 0.5;
}

.ReactModal__Content {
  opacity: 0;
}

.ReactModal__Content--after-open {
  opacity: 1;
  transition: 300ms;
}

.ReactModal__Content--before-close {
  opacity: 0;
}

.ReactModal__Overlay.ReactModal__Overlay--after-open.overlay {
  opacity: 1;
}

.ReactModal__Overlay.ReactModal__Overlay--before-close.overlay {
  opacity: 0;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
`;

如您所见，我包含了所有相关的CSS。我刚从文档中复制过来。 我不明白为什么它不起作用。