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

Question

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

一切都很好，除了当我第一次加载计划时，如果每个人已经确认或拒绝了提案，他就会被动画化。

因为一张图片胜过千言万语，这就是我的问题：

有没有办法可以检测到 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'