Schrodinger Logic to show a modal

foo.js

import {Phased} from 'recondition';
// 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>

        <Phased value={this.state.showDialog} timeouts={[300]}>
          {({value, nextValue, phasing}) =>  
            // display modal if it IS open or WILL be open.
            // ie when it is
            //  - open
            //  - closed, but gonna be opened
            //  - open, but gonna be closing
              (value || nextValue) && (
                <DialogOverlay
                  className={cx(   
                   'modal-dialog', 
                   // on open value is false, nextValue is true, phasing is false
                   // then value is false, nextValue is true, phasing is true
                   // then value is true, nextValue is true, phasing is true
                   // then value is true, nextValue is true, phasing is false
                   phasing
                     ? (nextValue ? 'opened' : 'closed')
                     : (value ? 'opened' : 'closed')
                  )}
                >
                <DialogContent>
                  <button onClick={() => this.setState({ showDialog: false })}>
                    Close Dialog
                  </button>
                  <p>React Spring makes it too easy!</p>
                </DialogContent>
              </DialogOverlay>
            ))}
        </Phased>
      </div>
    );
  }
}

<style>
  .modal-dialog  {
     transition-property: transform, opacity; 
     transition-duration: 300ms;
    
     opacity: 0;
     transform: translateY(10px); 
  }

  .opened {
     opacity: 1;
     transform: translateY(0px); 
  }   

  .opened {
     opacity: 0;
     transform: translateY(10px); 
  }   
</style>

PS: to be honest this is FAAAAARRRrrr more complex that Ryan example :P