title: React animation synchronization
body: <p>I have the following React component:</p>
  
  <pre><code>var Hello = React.createClass({
  
      getInitialState: function() {
          return {
              visibility: 'visible'
          };
      },
  
      toggleState: function() {
          if (this.state.visibility === 'visible') {
              this.setState({visibility: 'hidden'});
          } else {
              this.setState({visibility: 'visible'});
          }
      },
  
      componentDidMount: function () {
          var self = this;
          setInterval(function() {
              self.toggleState();
          }, 5000);
      },
  
      render: function() {
          return &lt;div className={"animated " + (this.state.visibility === 'visible' ? 'fadeIn' : 'fadeOut')}&gt;{this.state.visibility}&lt;/div&gt;;
      }
  
  });
  </code></pre>
  
  <p>See the fiddle <a href="https://jsfiddle.net/acasaccia/69z2wepo/50309/" rel="nofollow">here</a>.</p>
  
  <p>Basically I am controlling both the string displayed and the component visibility using <a href="https://github.com/daneden/animate.css" rel="nofollow">animate.css</a> through the <code>state</code> property <code>visibility</code>.</p>
  
  <p>Side effect is that, when the component is fading out, it shows "hidden" and then starts hiding. I would like to start the animation earlier, and only once it's done, change the string, so that "hidden" is never actually displayed.</p>
  
  <p>What's the best way to achieve this kind of synchronization?</p>