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

Question

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

Answer 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

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

How can i Animate cell of fixed data table component?

reactjs

reactcsstransitiongroup

fixed-data-table