Question

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

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

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

1 个答案: