Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/** @jsx React.DOM */
var React = require("react");
var AnimateMixin = require("react-animate");
var SimpleAnimation = React.createClass({
mixins: [AnimateMixin],
getInitialState: function getInitialState() {
return {
showoff: false,
};
},
showOff: function showOff() {
this.animate("my-custom-animation", {
opacity: 0,
}, {
opacity: 1,
}, "cubic-in-out", 5000, this.stopShowingOff);
this.setState({
showoff: true,
});
},
stopShowingOff: function stopShowingOff() {
this.setState({
showoff: false,
});
},
render: function render() {
return (
<div>
<a onClick={this.showOff}>Click to show off !</a>
{ this.state.showoff ? (
<div style={this.getAnimatedStyle("my-custom-animation")}>What a show off !</div>
) : null }
</div>
);
},
});
module.exports = SimpleAnimation;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment