title: SemanticUI React Popup Fade In/Fade Out
body: <p>I am trying to simply get the popup to fade out and fade in...</p>
  
  <p>It doesn't appear that semantic-ui-react gives you access to transitions what is the best way to do this... an example can be found at <a href="https://codesandbox.io/s/z35z9vw953" rel="nofollow noreferrer">https://codesandbox.io/s/z35z9vw953</a></p>
  
  <p>here is the sample component for posterity:</p>
  
  <pre><code>import React, { Component } from "react";
  import ReactDOM from "react-dom";
  
  import "./styles.css";
  import "semantic-ui-css/semantic.min.css";
  import { Popup } from "semantic-ui-react";
  
  class App extends Component {
    state = {
      isOpen: true
    };
    render() {
      let trigger = &lt;div&gt;OK!&lt;/div&gt;;
      return (
        &lt;div&gt;
        &lt;Popup
          trigger={trigger}
          content="hello world"
          open={this.state.isOpen}
          position="right center"
        /&gt;
  
        {!this.state.isOpen &amp;&amp; &lt;button onClick={()=&gt;this.setState({isOpen: true})}&gt;Click to open&lt;/button&gt;}
        {this.state.isOpen &amp;&amp; &lt;button onClick={() =&gt; this.setState({ isOpen: false })}&gt;Click to close&lt;/button&gt;}
  
        &lt;/div&gt;
      );
    }
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>edit:</p>
  
  <p>I tried wrapping a  around the entire thing and having the transition control it's showing/hiding, but it appears the visibility for the popup is <code>!important</code> so it really mucks with the fading in and out... see here <a href="https://codesandbox.io/s/43mvoynq7" rel="nofollow noreferrer">https://codesandbox.io/s/43mvoynq7</a> and below:</p>
  
  <pre><code>import React, { Component } from "react";
  import ReactDOM from "react-dom";
  
  import "./styles.css";
  import "semantic-ui-css/semantic.min.css";
  import { Popup, Transition } from "semantic-ui-react";
  
  class App extends Component {
    state = {
      isOpen: true
    };
    render() {
      let trigger = &lt;div&gt;OK!&lt;/div&gt;;
      return (
        &lt;div&gt;
          &lt;Transition
            visible={this.state.isOpen}
            animation="scale"
            duration={500}
          &gt;
            &lt;Popup
              trigger={trigger}
              content="hello world"
              open={this.state.isOpen}
              position="right center"
            /&gt;
          &lt;/Transition&gt;
          {!this.state.isOpen &amp;&amp; (
            &lt;button onClick={() =&gt; this.setState({ isOpen: true })}&gt;
              Click to open
            &lt;/button&gt;
          )}
          {this.state.isOpen &amp;&amp; (
            &lt;button onClick={() =&gt; this.setState({ isOpen: false })}&gt;
              Click to close
            &lt;/button&gt;
          )}
          &lt;button onClick={() =&gt; {}}&gt;OK&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>