JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="http://office.23c.se/static/move.min.js"></script>
<script src="http://office.23c.se/static/animate.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

 var AnimatedTest = React.createClass({

    mixins: [AnimateMixin],

    transitions: function() {
        return [
            <Transition prop="selected" to={true}>
                <Sequential>
                    <Animation animate="x" to="100" duration="1s" />
                    <Parallell>
                        <Animation animate="position" x="120" y="200" duration="1s" />
                        <Animation animate="color" to={this.props.color} duration="1s" />
                    </Parallell>
                </Sequential>
            </Transition>,

            <Transition prop="selected" to={false} >
                <Animation animate="x" to="0" duration="1s" />
                <Animation animate="y" to="0" duration="1s" />
                <Animation animate="color" to="black" duration="1s" />
            </Transition>
        ]
    },

    render: function() {
        return (
            <li onClick={this.props.onClick} ref='t'>
                {this.props.label} ({this.props.selected ? "selected" : "not selected"})
            </li>
        )
    }
});

var List = React.createClass({
    getInitialState: function() {
        return {
            selected: 1,
            color: "blue"
        }
    },

    handleClick: function(index) {
        console.log("click")
        this.setState({selected:index})
    },

    handleSelect: function(ev) {
        this.setState({color:ev.target.value})
    },

    render: function() {
        var children = ["one", "two", "three"].map(function(item, index) {
            var selected = (index == this.state.selected)
            return <AnimatedTest 
                label={item} 
                color={this.state.color} 
                selected={selected} 
                onClick={this.handleClick.bind(this, index)} />
        }.bind(this))

        return (
        <div>
            <h3>Select a color</h3>
            <select onChange={this.handleSelect}>
                <option...