card slide down in react spring not working

Question

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

Answer 1

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

Answer 2

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