JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

<!--

This is unfinished. We're trying to learn how to animate in React using CSSTransitionGroup

For reference see https://facebook.github.io/react/docs/animation.html. See the section entitled "Rendering a Single Child".

Also see https://github.com/reactjs/react-transition-group/tree/v1-stable
-->

CSS

.box {
  background: thistle;
  height: 100px;
  width: 200px;
}

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity 1s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

.example-appear {
  opacity: 0.01;
  transition: opacity 1s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

Babel + JSX

var {CSSTransitionGroup} = React.addons;

class Fade extends React.Component {
	constructor(props) {
  	super(props);
    this.clickHandler = this.clickHandler.bind(this); 
    this.state = {
    	items: ["Hello"]
    }
  }

	clickHandler(e) {
    this.setState({
    	items:[]
    });
  }
  
  render() {
    
    return (
        <CSSTransitionGroup  transitionName="example"
          transitionAppear={true}
          transitionLeave={true}
          transitionEnterTimeout={600}
          transitionAppearTimeout={600}
          transitionLeaveTimeout={300}>
          <div className="box"></div>
        </CSSTransitionGroup>
    );
  }
};

ReactDOM.render(
  <Fade/>,
  document.getElementById('container')
);

// SOURCES
// https://jsfiddle.net/nikhilkumar80/69z2wepo/34420/ (for the transition)
// http://jsfiddle.net/protron/560fyjnp/ (for a React fiddle in Babel + JSX)