react-spring实现卡片下滑动效不生效，如何实现点击触发效果？

问题原因 #

1. 你在Spring包裹的子元素上用了display: cost ? 'block' : 'none'直接切换显隐，该属性切换无过渡效果，会直接打断Spring的动画进程，导致看不到下滑效果。
2. 当前Spring的from和to属性是固定值，只会在组件首次挂载时执行一次动画，没有和点击触发的状态绑定，点击按钮时不会重新触发动画。

解决方案 #

调整逻辑让显隐状态完全交给react-spring控制，和点击触发的状态绑定即可，类组件调整后的代码参考如下：

// 先在state中添加控制显隐的状态，如果你代码中的cost本身就是控制显隐的状态变量，可以直接复用cost，不需要新增该状态
state = {
  showCard: false
}

// 点击按钮切换状态
handler = () => {
  this.setState(prev => ({ showCard: !prev.showCard }))
}

// render 部分的Spring代码调整
<Spring 
  from={{ opacity: 0, transform: 'translateY(-500px)' }} 
  to={{ 
    opacity: this.state.showCard ? 1 : 0, 
    transform: this.state.showCard ? 'translateY(0)' : 'translateY(-500px)' 
  }}
>
  {props => (
    <div style={props}>
      <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>
  )}
</Spring>

如果不需要收起动画，只要点击下滑展示一次，把from配置去掉，只保留to属性和状态绑定即可。使用transform而非marginTop是为了避免动画过程中触发页面重排，动画流畅度更高。

内容的提问来源于stack exchange，提问作者sambit