React Animation: List Filter Animation

fiddle.css

.super-fly-list-component .measure {
  position: absolute;
  left: -9999px;
}
.super-fly-list-component {
  position: relative;
}
.super-fly-list-component li {
  position: absolute;
  transition: opacity .3s ease, transform .3s ease, top .1s ease;
}

/* ReactCSSTransitionGroup Animation styles*/
.superfly-enter {
  opacity: 0.01;
  transform: translateX(-100px);
}
.superfly-enter.superfly-enter-active {
  opacity: 1;
  transform: translateX(0px);
  transition-delay: 0.25s; /* wait a bit for space to be made */
}
.superfly-leave {
  opacity: 1;
  transform: translateX(0px);
}
.superfly-leave.superfly-leave-active {
  opacity: 0.01;
  transform: translateX(100px);
}

fiddle.html

<!-- Required for using JSX in JsFiddle -->
<script src="//facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<!-- 
  sometimes gist / fiddle external resources specified in the manifest 
  are loaded out of order, so we the react dependencies in order here 
-->
<script src="//fb.me/react-with-addons-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>

<div id="app"></div>

fiddle.js

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var gameSystems = [
	'Sega Genesis',
	'Sega Saturn',
	'Sega Dreamcast',
	'Nintendo Entertainment System',
	'Super Nintendo',
	'PC',
	'PC Engine',
	'Gameboy',
	'Playstation',
	'PSP'
];

var SuperFlyList = React.createClass({
	propTypes: {
		filter: React.PropTypes.string
	},
	getInitialState: function () { return {}; },
	componentDidMount: function () {
		this.setState({
			eleHeight: ReactDOM.findDOMNode(this).querySelector('li').clientHeight
		});
	},
	render: function () {
		var itemsToDisplay = this.props.list
			.map(function (item, idx) {
				return { name: item, key: idx };
			})
			.filter(function (item) {
				return this.props.filter ? item.name.toLowerCase()
					.indexOf(this.props.filter) !== -1 : true;
			}.bind(this))
			.map(function (item, idx) { 
				return (
					<li 
						key={item.key}
						style={{top: this.state.eleHeight*idx+'px'}}>
						{item.name}
					</li>
				);
			}.bind(this));

		var totalHeight = itemsToDisplay.length * this.state.eleHeight;
			return (
				<ReactCSSTransitionGroup 
					className="super-fly-list-component" 
					style={{height: totalHeight + 'px'}} 
					component="ul" 
					transitionName="superfly"
					transitionEnterTimeout={300}
					transitionLeaveTimeout={300}>
					<li className="measure" key="measure">&nbsp;</li>
					{itemsToDisplay}
				</ReactCSSTransitionGroup>
			);
		}
});

var App = React.createClass({
	getInitialState: function () { return {}; },
		search: function () {
			this.setState({query: ReactDOM.findDOMNode(this.refs.search).value});
		},
	render: function () {
		return (
			<main>
				<label>
					Search: 
					<input ref="search" type="text" onChange={this.search} />
				</label>
				<SuperFlyList list={gameSystems} filter={this.state.query} />
			</main>
		);
	}
});

ReactDOM.render(<App />, document.getElementById('app'));

fiddle.manifest

name: ReactJS Animation popover menu
description: React state DOM Enter Exit Popover example
authors:
  - Adam Horton
resources:
  - //cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
  - //cdnjs.cloudflare.com/ajax/libs/classnames/2.1.3/index.min.js
normalize_css: no
wrap: h
panel_js: 2
panel_css: 0