Animation/transition using react spring

foo.js

// Adds a lovely fade in of the modal
// and a gentle slide-down of the modal content
class Demo extends React.Component {
  state = { showDialog: false };
  render() {
    return (
      <div>
        <button onClick={() => this.setState({ showDialog: true })}>
          Show Dialog
        </button>

        <Transition
          from={{ opacity: 0, y: -10 }}
          enter={{ opacity: 1, y: 0 }}
          leave={{ opacity: 0, y: 10 }}
        >
          {this.state.showDialog &&
            (styles => (
              <DialogOverlay style={{ opacity: styles.opacity }}>
                <DialogContent
                  style={{
                    transform: `translate3d(0px, ${styles.y}px, 0px)`,
                    border: "4px solid hsla(0, 0%, 0%, 0.5)",
                    borderRadius: 10
                  }}
                >
                  <button onClick={() => this.setState({ showDialog: false })}>
                    Close Dialog
                  </button>
                  <p>React Spring makes it too easy!</p>
                </DialogContent>
              </DialogOverlay>
            ))}
        </Transition>
      </div>
    );
  }
}

https://twitter.com/ryanflorence/status/1033962041298509824