This snippet reproduces a bug with React@16 and react-transition-group. For some reason, the new reconciler algorithm of react removes the css effect when componentDidMount is fired. But anything that happens after that point, works.

bug-react16-with-reacttransitiongroup.jsx

import React, { Component } from 'react';
import Transition, { ENTERING, ENTERED } from 'react-transition-group/Transition';
import './App.css';

const duration = 8000;

const fadeStyles = {
  [ENTERING]: 'in',
  [ENTERED]: 'in',
};

const Fade = props => {
  console.log('render Fade', props);
  return (
    <Transition
      {...props}
      className="fade"
      timeout={duration}
    >
      {status => {
        console.log('status', status);
        return (
          <div
            style={{ backgroundColor: 'red', width: '600px', height: '600px' }}
            className={`fade ${fadeStyles[status]}` || ''}
          >
            {props.children}
          </div>
        );
      }}
    </Transition>
  );
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  componentDidMount() {
    console.log('componentDidmount')
    
    this.setState({ show: true })

    // setTimeout(() => {
    //     console.log('timedout')
    //     this.setState({show: true})
    // }, 0);
  }

  render() {
    console.log('render', this.state.show);
    return (
      <div>
        <button onClick={() => this.setState({ show: !this.state.show })}>
          Toggle
            </button>
        <Fade in={this.state.show} >
          <h1>Hello world!</h1>
        </Fade>
      </div>
    );
  }
}

export default App;