React animate on click

animate on click

by ovo1381

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>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.fade {
  animation: fade-in-keyframes 1s;
}
@keyframes fade-in-keyframes {
  from {opacity: 0}
  to {opacity: 1}
}

JavaScript 1.7

class ClickMe extends React.Component {
  constructor (props) {
    super(props)
    this.state = {}
    this.state.fade = false
    this.fadingDone = this.fadingDone.bind(this)
	}
	componentDidMount () {
		const elm = this.refs.button
		elm.addEventListener('animationend', this.fadingDone)
	}
	componentWillUnmount () {
  	const elm = this.refs.button
		elm.removeEventListener('animationend', this.fadingDone)
	}
	fadingDone () {
		this.setState({fade: false})
	}
	render () {
		const fade = this.state.fade

		return (
      <button
        ref='button'
        onClick={() => this.setState({fade: true})}
        className={fade ? 'fade' : ''}>
		      Click me!
      </button>
    )
	}
}

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