React CSSTransitionGroup does not work even with key being set

Question

I have been trying since yesterday to make an animation to my image carousel. As far as I understand, you wrap the content to be animated with the CSSTransitionGroup and make sure it stays in the dom and also specify a unique key to each child of the transition group. I believe I have followed all this yet I see no transition.

One thing worth to mention, While I was trying to get this working I suspected if something could be wrong with the key, so I tried setting the key with a random string. The key would change every-time the state changes, and for some unknown reason I could see the animation. Can someone explain this to me.

I am not sure where I am going wrong, whether the version of transition group or in setting the key to children, No clue !

Below is the code replicating my problem.

var CSSTransitionGroup = React.addons.CSSTransitionGroup


class Images extends React.Component {
    constructor(props){
    super(props);
    this.state = {
        showComponent: false,
    }
  }

  componentWillReceiveProps(nextProps){
    if (this.props.name === nextProps.showComponentName){
        this.setState({
        showComponent: true,
      })
    } else {
      this.setState({
        showComponent: false,
      })
    }
  }

  render() {
    if (this.state.showComponent){
        return (
        <img src={this.props.url} />
      )
    } else {
        return null;
    }
  }
}


class TransitionExample extends React.Component {

  constructor (props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state= {
        showComponentName: null,
    }
  }

    onClick(button) {
    this.setState({
        showComponentName: button.currentTarget.textContent,
    })
  }

    render() {
        var imageData = [
        "http://lorempixel.com/output/technics-q-c-640-480-9.jpg",
            "http://lorempixel.com/output/food-q-c-640-480-8.jpg",
            "http://lorempixel.com/output/city-q-c-640-480-9.jpg",
            "http://lorempixel.com/output/animals-q-c-640-480-3.jpg"
    ];

        var images = [];
        for (var i in imageData) {
            i = parseInt(i, 10);
            images.push(
                <Images url={imageData[i]} showComponentName={this.state.showComponentName} name={imageData[i]} key={imageData[i]} />
            );
        }

    return (
        <div>
        <div>
        <button onClick={this.onClick}>{imageData[0]}</button>
        <button onClick={this.onClick}>{imageData[1]}</button>
        <button onClick={this.onClick}>{imageData[2]}</button>
        <button onClick={this.onClick}>{imageData[3]}</button>
      </div>
        <div className="transitions">
        <CSSTransitionGroup
            transitionName="viewphoto"
          transitionEnterTimeout={2000}
          transitionLeaveTimeout={2000}
          transitionAppearTimeout={2000}
          transitionAppear={true}
          transitionEnter={true}
          transitionLeave={true}>
                        {images}
        </CSSTransitionGroup>
            </div>
      </div>
    );
    }
}


ReactDOM.render(
  <TransitionExample />,
  document.getElementById('container')
);

I am also providing the link to the example on jsfiddle

Answer 1

The problem with your code is that images is always an array of elements that don't mount/unmount. The correct approach for this is to change the child. For example, if you substitute the return of the render method of your fiddle with this:

return (
    <div>
    <div>
    <button onClick={this.onClick}>{imageData[0]}</button>
    <button onClick={this.onClick}>{imageData[1]}</button>
    <button onClick={this.onClick}>{imageData[2]}</button>
    <button onClick={this.onClick}>{imageData[3]}</button>
  </div>
    <div className="transitions">
    <CSSTransitionGroup
        transitionName="viewphoto"
      transitionEnterTimeout={2000}
      transitionLeaveTimeout={2000}
      transitionAppearTimeout={2000}
      transitionAppear={true}
      transitionEnter={true}
      transitionLeave={true}>
          <img src={this.state.showComponentName} key={this.state.showComponentName}/>
    </CSSTransitionGroup>
        </div>
  </div>
);

The animation works! Using a simple img instead of your Images component and giving it the image url (this only works when you have clicked a button, showComponentName should be initialized to show the first image). You could also use a custom component of course, but the point here is that the children elements of CSSTransitionGroup must be changed if you want the animation to trigger because otherwise you are always rendering the same four Images components no matter whether they return the img or not. You might want to check out react-css-transition-replace since it usually works better when it comes to replacing.