score:3

Accepted answer

I figured it out! Your CSS animations are trying to use fadeIn, but that's not a CSS property. You need to change it to opacity. Like so:

//Page transition
.pageTransition-enter {
  opacity: 0.01;
}
.pageTransition-enter.pageTransition-enter-active {
  animation: opacity 1s ease-in;
}
.animation-leave {
  opacity: 1;
}
.pageTransition-leave.pageTransition-leave-active {
  animation: opacity 3s ease-in;
}
.pageTransition-appear {
  opacity: 0.01;
}
.pageTransition-appear.pageTransition-appear-active {
  animation: opacity 5s ease-in;
}

score:0

try defining your inner component before return call:

render() {
    const clonedElement = <div>{this.props.content()}</div>;

    return (
        <ReactCSSTransitionGroup transitionName="pageTransition" transitionEnterTimeout={500} transitionLeaveTimeout={300} transitionAppear={true} transitionAppearTimeout={500}>
            {clonedElement}
        </ReactCSSTransitionGroup>
      );
    }

Related Query

More Query from same tag