React CSS animations only after initial render

Question

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.

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.

As a picture is worth a thousand words, here's my problem:

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 ?

Here's a bit of (coffee) code to be more clear:

Person = React.createClass
  render: ->
    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
    <div className={className}
      {@props.person.username}
    </div>

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.

I have tried doing this, but it doesn't seem to work:

getInitialState: ->
  { mounted: false }
componentDidMount: ->
  @setState { mounted: true }
animate: ->
  @state.mounted

Thanks for you time,

Cheers !

Answer 1

You could listen to componentWillReceiveProps(nextProps), compare @props.person.confirmation with nextProps.person.confirmation and set a flag in @state to indicate that the component should wobble.

componentWillReceiveProps: (nextProps) ->
  if nextProps.person.confirmation != @props.person.confirmation
    @setState
      wobble: if nextProps.person.confirmation then 'vertical' else 'horizontal'