Реагировать анимацию CSS только после первоначального рендера

Question

Я создаю приложение React, в котором можно добавить Person в ScheduleCell. После того, как Человек добавлен, он может подтвердить или отклонить его присутствие, которое вызовет анимацию CSS, чтобы показать парню, наблюдающему за Расписанием, что что-то только что произошло.

Все работает нормально, за исключением того, что при первом загрузке Расписания каждый персонаж анимируется, если он уже подтвердил или отклонил предложение.

Как картинка стоит тысячи слов, вот моя проблема:

Есть ли способ, я могу обнаружить, что человек просто оказывается в первый раз, так что я не добавить CSS класс, запускающий анимацию CSS, и возможность добавлять класс в следующий раз?

Вот немного (кофе) кода, чтобы быть более ясным:

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> 

То, что я хотел бы здесь является то, что @animate возвращает ложь, когда компонент первой визуализации (при загрузке страницы), а затем возвращается истинно все время после его обработки.

Я попытался сделать это, но это не похоже на работу:

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

Спасибо за ваше время,

Ура!

Answer 1

Вы можете прослушать componentWillReceiveProps(nextProps), сравнить @props.person.confirmation с nextProps.person.confirmation и установить флаг в @state, чтобы указать, что компонент должен колебаться.

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