Transitions for dynamically changing child React Components

Do you want to request a feature or report a bug? I'm not sure if this is considered a bug but I am using a little complex React/Redux operations and I'm not sure whether my TransitionGroups are configured incorrectly or whether react-transition-group isn't built to handle this situation.

What is the current behavior?

The transitions aren't firing and the lifecycle hooks are not firing as well.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/m4mb9Lg3/4/).

What is the expected behavior?

I'm currently using Redux to store the reference to a React component, which another component then grabs and renders. Essentially, this allows me to do some polymorphic React component rendering. However, on the switch to a new React component (meaning a new component is stored in the store), the old React component does not fire its transition and neither does the new component. In my understanding, these transitions should fire on the mounting and unmounting of children components as long as the CSSTransitionGroup component remains mounted, which is the case.

import { CSSTransitionGroup } from 'react-transition-group';

import SmartSquadInfo from '../../containers/content/SmartSquadInfo';
import Pane from './Pane';

import '../../css/content/slide.css';

export default class Content extends React.Component {

  componentWillAppear() {
    console.log("Content appearing!");
  }

  getComponentToRender() {

    let actionComponent = this.props.actionComponent;

    return actionComponent.component ? <actionComponent.component height={actionComponent.height} /> : <SmartSquadInfo />;
  }

  render() {

    return (
      <div className="container theme-showcase" role="main">
        {this.getComponentToRender()}
        <CSSTransitionGroup
          transitionName="slide"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          {this.getComponentToRender()}
        </CSSTransitionGroup>
      </div>
    )
  }
}

The child of the CSSTransitionGroup gets updated based on whether the actionComponent's component has changed. From my understanding, this should fire transitions as the old component is unmounting and a new component is mounting.

Edit: I am trying to do horizontal sliding animations. Here is the corresponding stylesheet:

.slide-enter {
  transform: translateX(100%);
  /*transition: transform 1000ms ease-in-out;*/
}
.slide-enter.slide-enter-active {
  transform: translateX(0%);
  transition: transform 1000ms ease-in-out;
}
.slide-leave {
  transform: translateX(0%);
  /*transition: 0.3s transform ease-in-out;*/
}
.slide-leave.slide-leave-active {
  transform: translateX(-100%);
  transition: transform 1000ms ease-in-out;
}

Which versions, and which browser / OS are affected by this issue? Did this work in previous versions? These aren't working in any browser and I'm using a Mac.

reactjs / react-transition-group

Transitions for dynamically changing child React Components #217