Skip to content

Instantly share code, notes, and snippets.

@christiannwamba
Created May 30, 2018 14:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save christiannwamba/92c884d17617188695f96d68f57fc8b0 to your computer and use it in GitHub Desktop.
Save christiannwamba/92c884d17617188695f96d68f57fc8b0 to your computer and use it in GitHub Desktop.
//Form.js
...
class Form extends Component {
constructor(props) {
super(props);
this.state = {
startAnimation: 1
};
this.handleClick = this.handleClick.bind(this);
this.resetValue = this.resetValue.bind(this);
}
handleClick (e){
e.preventDefault();
this.setState({
startAnimation: 0
})
setTimeout(this.resetValue, 2500);
}
resetValue (){
this.setState({
startAnimation: 1
})
}
render() {
return(
<div id="parent">
<div className="container">
<form onSubmit={this.handleClick} className="form-signin">
<h2 className="form-signin-heading">BATCAVE</h2>
<label className="sr-only">Email address</label>
<input type="email" id="inputEmail" className="form-control" placeholder="Email address" required="" />
<label className="sr-only">Password</label>
<input type="password" id="inputPassword" className="form-control" placeholder="Password" required="" />
<div className="checkbox">
<label>
<input type="checkbox" value="remember-me" /> Remember me
</label>
</div>
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
<Motion
defaultStyle={{ top: 0, opacity: 0 }}
style={{ top: spring(this.state.startAnimation ? 80 : 1), opacity: spring(this.state.startAnimation ? 0 : 1) }}
>
{(style) => (
<NotificationBox
top={style.top}
opacity={style.opacity}
>
Welcome Batman
</NotificationBox>
)}
</Motion>
</div>
</div>
)
}
}
export default Form;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment