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 ponent 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 }
ponentDidMount: ->
  @setState { mounted: true }
animate: ->
  @state.mounted

Thanks for you time,

Cheers !

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 ponent 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 }
ponentDidMount: ->
  @setState { mounted: true }
animate: ->
  @state.mounted

Thanks for you time,

Cheers !

• javascript
• css
• reactjs
• css-animations

Share Improve this question Follow edited Apr 11, 2015 at 18:56 Jeremy F. asked Apr 11, 2015 at 18:42 Jeremy F.Jeremy F. 1,3761212 silver badges3131 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

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