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

Posted 2023-02-22

【中文标题】仅在初始渲染后反应 CSS 动画

【英文标题】：React CSS animations only after initial render

【发布时间】：2015-06-17 08:47:13

【问题描述】：

我正在构建一个 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

感谢您的宝贵时间，

干杯！

【参考方案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'

【讨论】：

太棒了！非常聪明，比我预期的要好，而且很有意义。我还学到了一些新的东西，可以解锁新的重构。谢谢楼主！