class IndexPage extends React.Component { | |
constructor(props) { | |
super(props) | |
this.state = {show: false} | |
} | |
componentDidUpdate() { | |
if (this._el) { | |
lottie.loadAnimation({ | |
container: this._el, | |
renderer: 'svg', | |
animationData: animation, | |
}) | |
} | |
} | |
_click = () => { | |
this.setState({show: true}) | |
setTimeout(() => this.setState({show: false}), 1500) | |
} | |
render() { | |
return ( | |
<div> | |
<p> | |
<span | |
style={{ | |
fontWeight: 'bold', | |
color: 'purple', | |
cursor: 'pointer', | |
}} | |
onClick={this._click} | |
> | |
Click me | |
</span> | |
</p> | |
{this.state.show && ( | |
<div | |
id="animation" | |
ref={el => (this._el = el)} | |
style={{ | |
position: 'absolute', | |
width: '100%', | |
height: '100%', | |
top: 0, | |
left: 0, | |
}} | |
/> | |
)} | |
</div> | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment