JSFiddle - React, Tailwind, and code Playground

by mrienstra

HTML

<script src="http://michaelrienstra.com/temporary/react-with-addons-0.10.0-transition-skip-endings.js"></script>
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

<div id="content"></div>

CSS

.todos span div:not(:first-child) {
  border-top: 1px solid #ddd;
}
.example-enter {
  opacity: 0.01;
  margin: -0.5em 0;
  transition: margin .5s ease-in, opacity .5s ease-in .5s;
}
.example-enter.example-enter-active {
  opacity: 1;
  margin: 0;
}
.example-leave {
  opacity: 1;
  margin: 0;
  transition: opacity .5s ease-in, margin 500ms ease-in .5s;
}
.example-leave.example-leave-active {
  opacity: 0.01;
  margin: -0.5em 0;
}

JavaScript 1.7

/** @jsx React.DOM */
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var shouldItemUnmountOnTransitionEnd = function(e, animationType, totalElapsedTime) {
  if ((animationType === 'leave' && e.propertyName === 'opacity') ||
      (animationType === 'enter' && e.propertyName.substr(0, 6) === 'margin')) {
    console.log('shouldItemUnmountOnTransitionEnd returning false');
    return false;
  } else {
    console.log('shouldItemUnmountOnTransitionEnd returning true');
    return true;
  }
};

var TodoList = React.createClass({
  getInitialState: function() {
    return {items: ['hello', 'world', 'click', 'me']};
  },
  handleAdd: function() {
    var newItems = this.state.items;
    newItems.splice(
      Math.round(Math.random() * this.state.items.length),
      0,
      [prompt('Enter some text')]
    );
    this.setState({items: newItems});
  },
  handleRemove: function(i) {
    var newItems = this.state.items;
    newItems.splice(i, 1)
    this.setState({items: newItems});
  },
  render: function() {
    var items = this.state.items.map(function(item, i) {
      return (
        <div key={item} onClick={this.handleRemove.bind(this, i)}>
          {item}
        </div>
      );
    }.bind(this));
    return (
      <div className="todos">
        <div><button onClick={this.handleAdd}>+</button></div>
        <ReactCSSTransitionGroup transitionName="example" shouldComponentUnmountOnTransitionEnd={shouldItemUnmountOnTransitionEnd}>
          {items}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
});
React.renderComponent(
  <TodoList />,
  document.getElementById('content')
);