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

Question

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

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

一图胜千言，我的问题是：

有没有一种方法可以检测到 Person 是第一次渲染，所以我不添加 CSS class 触发 CSS 动画，并且能够下次添加 class ?

这里有一点（咖啡）代码更清楚：

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 returns 当组件首次呈现（在页面加载时）时为 false，然后 returns 在呈现后一直为 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'

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

React CSS animations only after initial render

javascript

css

reactjs

css-animations