-
-
Save christiannwamba/92c884d17617188695f96d68f57fc8b0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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