仅在初始渲染后反应CSS动画

Question

我正在构建一个React应用程序，可以将人员添加到ScheduleCell。在添加了Person之后，他可以确认或拒绝他的存在，这将触发一个CSS动画，以向那个正在观看时间表的人显示刚刚发生的事情。

一切正常，但是当我第一次加载时间表时，如果他已经确认或拒绝了提案，那么每个人都会动画。

由于图片胜过千言万语，这是我的问题：

有没有办法可以检测到Person刚刚第一次渲染，所以我不添加触发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在首次渲染组件时（页面加载时）返回false，然后在渲染后一直返回true。

我尝试过这样做，但它似乎不起作用：

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'