javascript - 反应弹簧不起作用让卡滑下来

Question

我是新手，我正在尝试使用 react-spring 向下滑动我的 div 元素。但是滑下效果不起作用。我在教程中看到了这一点，并试图实现它，但它不起作用。

这是我的代码：

<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>

如何使其工作，以便 div 组件在单击按钮时向下滑动。请帮忙

标签： javascriptreactjsreact-spring