卡在反应弹簧中滑下不起作用答案

【问题标题】：card slide down in react spring not working卡在反应弹簧中滑下不起作用
【发布时间】：2021-12-05 04:32:13
【问题描述】：

我是新手，我正在尝试使用 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>
                  
                  <div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20 
                    }}></div>
                </CardBody>
              </Card>
              </div>
            </div>
          )}
        </Spring>

如何让它在单击按钮时使 div 组件向下滑动？请帮忙

【问题讨论】：

标签： javascript reactjs react-spring

【解决方案1】：

我找到了解决方案，一切都很好，不需要动画 div 我只需将 react-spring 的版本更改为 npm i react-spring@8.0.20 就可以了

【讨论】：

这对任何人来说都不是一个好的解决方案，因为没有维护 react-spring 的 v8。

【解决方案2】：

您没有将动画样式传递给animated.div。这意味着 spring 中的道具不会为您的组件设置动画。

另外，因为您是在点击时触发动画。我会将动画值 - opacity 和 marginTop 设置为状态变量。然后你可以在onClick 处理程序上更新触发动画变化的状态。

请参阅 Spring 文档 here

更多信息，这里是codesandbox

【讨论】：