Soy nuevo en reaccionar y estoy tratando de deslizarme hacia abajo en mi elemento div usando react-spring. Sin embargo, el efecto de deslizamiento hacia abajo no funciona. Vi esto en un tutorial e intenté implementarlo, pero no funciona.

Este es mi código:

 <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> <Row style={{ marginTop: '1rem', marginLeft: '3rem', marginBottom: '1rem' }}> <h4> <strong>Normal Freight:</strong> Rs{rate[destination]}/ton </h4> </Row> <Row style={{ marginLeft: '3rem', marginBottom: '1rem' }}> <h4> <strong>Volume:</strong> {volume} tons </h4> </Row> <Row style={{ marginLeft: '3rem', marginBottom: '1rem' }}> <h4> <strong>Special Freight:</strong> Rs{1.3 * rate[destination]}/ton </h4> </Row> <Row style={{ marginLeft: '3rem', marginBottom: '1rem' }}> <h4> <strong>Delta Price:</strong> Rs{1.3 * rate[destination] - rate[destination]}{' '} </h4> </Row> <Row style={{ marginLeft: '3rem', marginBottom: '1rem' }}> <h4> <strong>Cost Impact:</strong> Rs{(1.3 * rate[destination] - rate[destination]) * volume} </h4> </Row> <div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20 }}></div> </CardBody> </Card> </div> </div> )} </Spring>

¿Cómo hago que funcione para que el componente div se deslice hacia abajo al hacer clic en un botón? Por favor ayuda