title: card slide down in react spring not working
body: <p>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.</p>
  <p>Here is my code:</p>
  <pre><code>&lt;Spring from={{ opacity: 0, marginTop: -500 }} to={{ opacity: 1, marginTop: 0 }}&gt;
            {props =&gt; (
              &lt;div style={props}&gt;
                &lt;div style={{ display: cost ? 'block' : 'none' }}&gt;
                &lt;Card className=&quot;calculation shadow&quot;&gt;
                  &lt;CardBody&gt;
                    &lt;div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20 
                     }}&gt;&lt;/div&gt;
                    &lt;Row style={{ float: 'right', marginBottom: '1rem' }}&gt;
                      &lt;span style={{ float: 'right' }}&gt;
                        &lt;FontAwesomeIcon icon={faClipboardList} onClick={this.handler} /&gt;
                      &lt;/span&gt;
                    &lt;/Row&gt;
                    
                    &lt;div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20 
                      }}&gt;&lt;/div&gt;
                  &lt;/CardBody&gt;
                &lt;/Card&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            )}
          &lt;/Spring&gt;
  </code></pre>
  <p>How do I make it work so that the div component slides down when clicking a button? Please help</p>