我如何为固定数据表组件的单元格设置动画？

Posted 2023-02-21

【中文标题】我如何为固定数据表组件的单元格设置动画？

【英文标题】：How can i Animate cell of fixed data table component?

【发布时间】：2016-09-23 02:35:42

【问题描述】：

我正在使用 facebooks fixedDataTable 来显示股票仪表板。我需要实现的是基于价格变化的闪存固定数据表单元格（比如价格列）绿色或红色。我们如何在固定数据表中实现动画？

【参考方案1】：

您可以在数据表 <Cell> 的子组件中使用 css 来完成此操作。比如：

componentWillReceiveProps(nextProps) 
  // if the price has changed, add a class to do some animation stuff
  if (nextProps.price != this.props.price) 
    this.setState( className: "fancy-flash-class-in" );
  


componentDidUpdate() 
  // after the component has updated, set the class back
  if (this.state.className == "fancy-flash-class-in") 
    setTimeout(() = > this.setState(
      className: "fancy-flash-class-out"),
    500);
  

componentDidUpdate() 调用速度非常快，所以你会做一个setTimeout，否则动画将不起作用。

在css中可以添加动画：

fancy-flash-class-in：给组件一个高亮颜色和一个 css 过渡 fancy-flash-class-out：基本组件颜色，用css动画从红色或绿色返回到基本颜色

所以在你的css文件中：

.fancy-flash-class-out 
  background-color: grey;
  transition: background-color 2s;
  -webkit-transition: background-color 2s; /* Safari */

简单演示codepen here

【讨论】：

不，这不起作用。如果我在 componentDidUpdate() 中评论 this.setState ，我可以看到单元格从基本颜色过渡到红色并保持红色。似乎在 componentWillReceiveProps 之后调用 componentDidUpdate 的速度如此之快，以至于我看不到背景颜色的变化。

这取决于您的 css 设置。更新了答案。

感谢您的回复。但发生的是 1)componentWillReceiveProps 被调用并设置了“fancy-flash-class-in”类。 （调用渲染） 2）甚至在此转换完成之前调用 componentDidUpdate 将状态设置回“fancy-flash-class-out”（再次调用渲染）。所以最终的影响是我总是看到灰色。

我在调用 "this.setState" 时在 componentDidUpdate 中添加了延迟 (setTimeout) 而不是转换延迟。这似乎可行，但是当更新频率不恒定时，动画根本不流畅。我将尝试“CSSTransitionGroup”

是的 setState 超时也可以。但我更喜欢纯 CSS 解决方案。更符合反应状态（理论上，您的组件可能会在超时后被卸载，并且事情会崩溃）。 CSStransitiongroup 更多用于组件的移入和移出，这看起来与您的“状态变化动画”需求不同。