title: How to set display:block and transition opacity at the same time in React?
body: <p>I have a background layer element defined in JSX which has set <code>display:none</code> intially:</p>
  
  <pre><code>&lt;div id="naviBG" style={naviBGStyleClone} role="button" onClick={this.onCloseClicked} /&gt;
  </code></pre>
  
  <p><strong>Style:</strong></p>
  
  <pre><code>const naviBGStyle = {
    display: 'none',
    opacity: 0,
    transition: 'opacity 0.4s ease',
  };
  </code></pre>
  
  <p>When clicked, I want the layer to smoothly disappear or re-appear using the transition defined in css. In <code>render()</code> I check if the element should be shown or hidden:</p>
  
  <p><strong>render()</strong></p>
  
  <pre><code>const naviBGStyleClone = Object.assign({}, naviBGStyle);
  if (this.props.status === 'closed') {
    naviBGStyleClone.display = 'none';
    naviBGStyleClone.opacity = 0;
  } else {
    naviBGStyleClone.display = 'block';
    naviBGStyleClone.opacity = 1;
  }
  
  return (
      &lt;div id="naviBG" style={naviBGStyleClone} role="button" onClick={this.onCloseClicked} /&gt;
  );
  </code></pre>
  
  <p>Now, this kinda works as the element will be shown/hidden but it pops in without the transition animation set on opacity.</p>
  
  <p>Normally I would then use something like <code>requestAnimationFrame</code> to work around this like so:</p>
  
  <p><strong>render() with raf:</strong></p>
  
  <pre><code>const naviBGStyleClone = Object.assign({}, naviBGStyle);
  if (this.props.status === 'closed') {
    naviBGStyleClone.display = 'none';
    if (typeof window !== 'undefined') {
      window.requestAnimationFrame(() =&gt; {
        naviBGStyleClone.opacity = 0;
      });
    }
  } else {
    naviBGStyleClone.display = 'block';
    if (typeof window !== 'undefined') {
      window.requestAnimationFrame(() =&gt; {
        naviBGStyleClone.opacity = 1;
      });
    }
  }
  
  return (
      &lt;div id="naviBG" style={naviBGStyleClone} role="button" onClick={this.onCloseClicked} /&gt;
  );
  </code></pre>
  
  <p>But this won't work in react as it would cause the style to be modified after <code>render()</code> has already finished.</p>
  
  <p>So, what's the correct way to do this in React?</p>