ReactTransitionGroup

.gitignore

.module-cache

README.md

Usage

The following steps require npm i -g node-static react-tools.

To view locally, try static -p 1234 && open http://localhost:1234 from the cloned gist folder in Terminal.

To make changes, try jsx --extension jsx --watch . . in a separate Terminal tab.

app.js

var Transition = React.addons.TransitionGroup;

var Colors = {
  white: '#fff',
  dark: '#444',
  blue: '#09c'
};
var Lang = {
  toggle_item: 'Toggle Item'
};

var App = React.createClass({displayName: "App",
  getInitialState: function() {
    return {
      item: true
    };
  },
  // _addItem: function () {
  //   var now = moment().format('x').substring(7);
  //   this.setState({list: this.state.list.concat(now)});
  // },
  _toggleItem: function () {
    this.setState({item: !this.state.item});
  },
  render: function () {
    console.log('App:render', this.state);
    var style = {
      app: {
        flexFlow: 'column'
      },
      toggle: {
        background: Colors.dark,
        borderRadius: 3,
        color: Colors.white,
        padding: 20,
        position: 'absolute',
        top: 10
      }
    };
    return (
      React.createElement("div", {className: "center", style: style.app}, 
        React.createElement("button", {onClick: this._toggleItem, style: style.toggle}, Lang.toggle_item), 
        React.createElement(Transition, null, 
          this.state.item && React.createElement(Item, null)
        )
      )
    );
  }
});
var Item = React.createClass({displayName: "Item",
  componentWillAppear: function (callback) {
    console.log('componentWillAppear');
    setTimeout(callback, 1); // need at least one tick to fire transition
  },
  componentDidAppear: function () {
    console.log('componentDidAppear');
    this._enterStyle();
  },
  componentWillEnter: function (callback) {
    console.log('componentWillEnter');
    setTimeout(callback, 1);
  },
  componentDidEnter: function () {
    console.log('componentDidEnter');
    this._enterStyle();
  },
  componentWillLeave: function (callback) {
    console.log('componentWillLeave');
    this._leaveStyle();
    setTimeout(callback, 500); // matches transition duration
  },
  componentDidLeave: function () {
    console.log('componentDidLeave');
  },
  _enterStyle: function () {
    var el = this.refs.item.getDOMNode();
    el.style.opacity = 1;
  },
  _leaveStyle: function () {
    var el = this.refs.item.getDOMNode();
    el.style.opacity = 0;
  },
  render: function () {
    var style = {
      width: 100,
      height: 100,
      background: Colors.blue,
      opacity: 0,
      transition: 'opacity .5s'
    };
    return React.createElement("div", {ref: "item", style: style});
  }
});

React.render(React.createElement(App, null), document.body);

app.jsx

var Transition = React.addons.TransitionGroup;

var Colors = {
  white: '#fff',
  dark: '#444',
  blue: '#09c'
};
var Lang = {
  toggle_item: 'Toggle Item'
};

var App = React.createClass({
  getInitialState: function() {
    return {
      item: true
    };
  },
  // _addItem: function () {
  //   var now = moment().format('x').substring(7);
  //   this.setState({list: this.state.list.concat(now)});
  // },
  _toggleItem: function () {
    this.setState({item: !this.state.item});
  },
  render: function () {
    console.log('App:render', this.state);
    var style = {
      app: {
        flexFlow: 'column'
      },
      toggle: {
        background: Colors.dark,
        borderRadius: 3,
        color: Colors.white,
        padding: 20,
        position: 'absolute',
        top: 10
      }
    };
    return (
      <div className="center" style={style.app}>
        <button onClick={this._toggleItem} style={style.toggle}>{Lang.toggle_item}</button>
        <Transition>
          {this.state.item && <Item />}
        </Transition>
      </div>
    );
  }
});
var Item = React.createClass({
  componentWillAppear: function (callback) {
    console.log('componentWillAppear');
    setTimeout(callback, 1); // need at least one tick to fire transition
  },
  componentDidAppear: function () {
    console.log('componentDidAppear');
    this._enterStyle();
  },
  componentWillEnter: function (callback) {
    console.log('componentWillEnter');
    setTimeout(callback, 1);
  },
  componentDidEnter: function () {
    console.log('componentDidEnter');
    this._enterStyle();
  },
  componentWillLeave: function (callback) {
    console.log('componentWillLeave');
    this._leaveStyle();
    setTimeout(callback, 500); // matches transition duration
  },
  componentDidLeave: function () {
    console.log('componentDidLeave');
  },
  _enterStyle: function () {
    var el = this.refs.item.getDOMNode();
    el.style.opacity = 1;
  },
  _leaveStyle: function () {
    var el = this.refs.item.getDOMNode();
    el.style.opacity = 0;
  },
  render: function () {
    var style = {
      width: 100,
      height: 100,
      background: Colors.blue,
      opacity: 0,
      transition: 'opacity .5s'
    };
    return <div ref="item" style={style} />;
  }
});

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

favicon.ico

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ReactTransitionGroup</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.2/ReactRouter.js"></script>
    <script src="app.js"></script>
  </body>
</html>

style.css

@import "https://fonts.googleapis.com/css?family=Questrial";

/* reset */

button {
  border: initial;
  font: inherit;
}

/* base */

html {
  height: 100%;
  color: #444;
  font: 100%/1 'Questrial';
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
}

body { height: 100%; }

/* core */

.center {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

/* app */

Awesome