I am new to react and I am trying to slide down my div element using react-spring. However, the slide-down effect is not working. I saw this in a tutorial and tried to implement it however it's not working.
Here is my code:
<Spring from={{ opacity: 0, marginTop: -500 }} to={{ opacity: 1, marginTop: 0 }}>
{props => (
<div style={props}>
<div style={{ display: cost ? 'block' : 'none' }}>
<Card className="calculation shadow">
<CardBody>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
<Row style={{ float: 'right', marginBottom: '1rem' }}>
<span style={{ float: 'right' }}>
<FontAwesomeIcon icon={faClipboardList} onClick={this.handler} />
</span>
</Row>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
</CardBody>
</Card>
</div>
</div>
)}
</Spring>
How do I make it work so that the div component slides down when clicking a button? Please help
You're not passing the animated styles to an animated.div. Which means the props from the spring will not animate your component.
Also since you're trigger the animation on a click. I would set the animated values – opacity & marginTop as state variables. Then you on the onClick handler you can update the state triggering a change in the animation.
See the Spring docs here
And for more information, here's a codesandbox
I found the solution everything is fine no animated div required I had to just change the version of react- spring to npm i react-spring@8.0.20 and it works