React Component and CSSTransitionGroup

Question

early days with Facebook ReactJS. Simple CSS fade-in transition. It works as expected with ReactJS v0.5.1. It doesn't with v11.1, v12.0, v12.1. Here's the CSS and JSX:

CSS

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

JSX for ReactJS v12.1

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  render: function() {
    return (
      <ReactTransitionGroup transitionName="example">
          <h1>Hello world</h1>      
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

Here's the list of Codepens:

• v0.5.1 http://codepen.io/lanceschi/pen/ByjGPW
• v0.11.1 http://codepen.io/lanceschi/pen/LEGXgP
• v0.12.0 http://codepen.io/lanceschi/pen/ByjGOR
• v0.12.1 http://codepen.io/lanceschi/pen/YPwROy

Any help appreciated.

Cheers, Luca

Answer 1

It looks like CSSTransitionGroup used to animate on initial mount, but it doesn't any more as of React v0.8.0 or so. See https://github.com/facebook/react/issues/1304 for a bit more info.

One solution is to simply mount the <h1> after <HelloWorld> is mounted, like so:

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  getInitialState: function() {
    return { mounted: false };
  },
  componentDidMount: function() {
    this.setState({ mounted: true });
  },
  render: function() {
    var child = this.state.mounted ?
      <h1>Hello world</h1> :
      null;

    return (
      <ReactTransitionGroup transitionName="example">
        {child}
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

Live example: http://codepen.io/peterjmag/pen/wBMRPX

Note that CSSTransitionGroup is intended for transitioning child components as they're dynamically added, removed, and replaced, not necessarily for animating them on initial render. Play around with this TodoList Codepen (adapted from this example in the React docs) to see what I mean. The list items fade in and out as they're added and removed, but they don't fade in on the initial render.

EDIT: A new "appear" transition phase has been introduced recently to allow for animation-on-mount effects. See https://github.com/facebook/react/pull/2512 for details. (The commit has already been merged into master, so I imagine it'll be released with v0.12.2.) Theoretically, you could then do something like this to make the <h1> fade in on mount:

JS

...
<ReactTransitionGroup transitionName="example" transitionAppear={true}>
    <h1>Hello world</h1>
</ReactTransitionGroup>
...

CSS

.example-appear {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

Answer 2

I looked into the issue a little deeper. With the current version of ReactJS it seems not possible to make an initial CSS transition. More info and thoughts here.

Most probably things are gonna change with v0.13.x. You can have a look at the source code which features a transitionAppear prop.

EDIT: I downloaded from GitHub the latest ReactJS (v0.13.0 - alpha) and built it. Everything now works accordingly if you make use of transitionAppear prop (is to be set true explicitly). Here below you'll find the updated CSS and JSX as well as the live example:

CSS:

.example-appear {
  opacity: 0.01;
  transition: opacity 0.5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

JSX for ReactJS v0.13.0 - alpha:

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  render: function() {
    return (
      <ReactTransitionGroup transitionName="example" transitionAppear={true}>
          <h1>Hello world</h1>      
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

Live example: http://codepen.io/lanceschi/pen/NPxoGV

Cheers, L