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:

Problem illustration

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 !

Alexandre Kirszenberg · Accepted Answer · 2015-04-11 19:04:21Z

6

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'

answered Apr 11, 2015 at 19:04

Alexandre Kirszenberg

36.4k10 gold badges93 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeremy F. Over a year ago

Brilliant ! Very clever, works better than I expected and makes a lot of sense. I also learned something new that unlocks new refactorings. Thank you sir !

Collectives™ on Stack Overflow

React CSS animations only after initial render

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related