title: React CSS animations only after initial render
body: <p>I'm building a React app where one can add a Person to a ScheduleCell. After the Person has been added, he can confirm or reject his presence, which will trigger a CSS animation to show the guy watching the Schedule that something just happened.</p>
  
  <p>Everything is working just fine, except that when I load the Schedule the first time, every single Person is animated if he has already confirmed or rejected the proposal.</p>
  
  <p>As a picture is worth a thousand words, here's my problem:</p>
  
  <p><img src="https://i.stack.imgur.com/fU3tC.gif" alt="Problem illustration"></p>
  
  <p>Is there a way I can detect that the Person just rendered for the first time so I don't add the CSS class triggering the CSS animation, and be able to add the class the next times ?</p>
  
  <p>Here's a bit of (coffee) code to be more clear:</p>
  
  <pre><code>Person = React.createClass
    render: -&gt;
      confirmation = @props.person.confirmation
      className = 'alert '
      if confirmation == undefined
        className += 'neutral'
      else if confirmation == true
        className += 'good '
        className += 'hvr-wobble-vertical' if @animate
      else if confirmation == false
        className += 'bad  '
        className += 'hvr-wobble-horizontal' if @animate
      &lt;div className={className}
        {@props.person.username}
      &lt;/div&gt;
  </code></pre>
  
  <p>What I'd like here is that @animate returns false when the component is first rendered (at page load) and then returns true all the time after it's been rendered.</p>
  
  <p>I have tried doing this, but it doesn't seem to work:</p>
  
  <pre><code>getInitialState: -&gt;
    { mounted: false }
  componentDidMount: -&gt;
    @setState { mounted: true }
  animate: -&gt;
    @state.mounted
  </code></pre>
  
  <p>Thanks for you time,</p>
  
  <p>Cheers !</p>