title: CSS modal overlay with fade in and out?
body: <p>I would like to have a content overlay, to grey-out the page contents when a modal opens. I would like the overlay to fade in, and fade out.</p>
  
  <p>I can:</p>
  
  <ul>
  <li>Add and remove classes using JavaScript (React, not jQuery)</li>
  <li>Run any CSS/SASS code</li>
  </ul>
  
  <p>Constraints:</p>
  
  <ul>
  <li>The overlay <code>div</code> I'm using is always in the DOM, it's not added and removed.</li>
  <li>I can't use any JavaScript timing (no <code>setTimeout()</code>), all timing must be in CSS/SASS</li>
  </ul>
  
  <p>Obviously, the overlay can't block clicks on content when it's hidden, so I can't just animate <code>opacity</code>.</p>
  
  <p>I'm currently using <code>background-color: rgba(0, 0, 0, 0.5);</code> and <code>transition: background-color 1s ease-in;</code> to animate, but I can't seem to get the overlay "in the way" and "out of the way" of the content (while also fading in AND out).</p>
  
  <p>I've tried using the <code>height</code> property (set to <code>100%</code> for overlay on, <code>0</code> for overlay off), but I think I can only use <code>transition: height 0s ease-in 0;</code> once, not twice (because I need a delay for this when fading out).</p>
  
  <p>How can I do this..?</p>
  
  <p><strong>Update</strong></p>
  
  <p>Request to see what I've tired:</p>
  
  <pre><code>.overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 10;
    transition: background-color .5s ease-in;
    background-color: rgba(0, 0, 0, 0);
  }
  .overlay-start-off {
    transition: height 0s ease-in 0;
  }
  .overlay-start-on {
    transition: height 0s ease-in .5s;
  }
  .overlay--show {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }
  </code></pre>
  
  <p>Classes are switched in/out using state in a React component, which happens as soon as you click to open/close the modal. </p>
  
  <p>The bit I'm struggling with is getting the fade out to happen, then the removal of the overlay from blocking the content.</p>
  
  <p>I know this code doesn't work!</p>