.jsx

    var items = this.state.items.map(item => {
      var data = item.value;
      
      return (
        <Fadeable key={data.id}
          onComplete={() => Actions.remove(data.id)}
          transition="opacity 0.5s ease-in"
          style={{opacity: 0, color: 'red'}}>
          
          <li>
            State: {item.state}, ID: {data.id}, Tag: {data.tag}&nbsp;
            <a onClick={Fadeable}>delete</a>
          </li>
        </Fadeable>
      );
    });

fadeable.jsx

'use strict';

var React = require('react/addons');
var bindMethods = require('utils/bind-methods');

class Fadeable extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = { };
    this.el = null;
    
    bindMethods(this, ['onTransitionEnd', 'transition', 'wrap']);
  }
  
  onTransitionEnd() {
    this.props.onComplete();
  }
  
  componentDidMount() {
    this.el = React.findDOMNode(this);
    this.el.addEventListener('transitionend', this.onTransitionEnd);
  }
  
  componentWillUnmount() {
    this.el.removeEventListener('transitionend', this.onTransitionEnd);
  }
  
  transition() {
    this.setState(Object.assign({
      transition: this.props.transition
    }, this.props.style));
  }
  
  wrap(child, cb) {
    if (child && !child._isReactElement) { return child; }
    var obj = { }, doWrap = false;
    
    Object.keys(child.props)
    .forEach(function (key) {
      if (child.props[key] === Fadeable) {
        obj[key] = this.transition;
      }
    }, this);
    
    if (child.props.children) {
      obj.children = React.Children.map(child.props.children, this.wrap);
    }
    
    if (!Object.keys(obj).length) { return child; }
    
    return React.addons.cloneWithProps(child, obj);
  }
  
  render() {
    return React.addons.cloneWithProps(
      this.wrap(this.props.children), {
        style: this.state
      }
    );
  }
}

module.exports = Fadeable;