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

Question

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

Answer 1

您可以在 datatable 的子组件中使用 css 来执行此操作<Cell>。就像是：

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()被称为非常快，所以你会做 a 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 */
}

简单的演示代码笔在这里