AgGrid：如何根据变化以不同颜色闪烁单元格

Question

我正在像这样使用 ag-grid-react：

import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

并在渲染中这样声明（为清楚起见删除了一些细节）：

return <div className="MarketGrid ag-theme-balham" >
    <AgGridReact domLayout='autoHeight'
        enableCellChangeFlash={true}
        rowSelection={'single'}
        onSelectionChanged={this.onSelectionChanged.bind(this)}
        onGridReady={this.onGridReady.bind(this)} />
    </div>;

“enableCellChangeFlash”属性工作正常，我知道如何改变它的颜色，但是如果我想根据新值是高于还是低于之前的值来改变颜色呢？

我的更新代码有点像这样：

let row = this.gridApi.getRowNode(this.props.productIds.indexOf(id));
    for (var f in data) {
        row.setDataValue(f, data[f]);
    }
}

我想我应该在某个地方设置单元格样式，但我不确定在哪里。

更新：根据这个页面https://www.ag-grid.com/javascript-grid-data-update/#flashing我应该这样做：

“如果您想覆盖 flash 自身的呈现方式（例如更改背景颜色或删除动画），请覆盖相关的 CSS 类。”

有人知道怎么做吗？

Answer 1

我现在差不多明白了。我发现的答案是基于 CSS 的。设置闪烁/停止闪烁的类名，如：

return (<div key={Math.random()}
  className={some logic to set classname here, like "blink-red" or "blink-blue"}
  onAnimationEnd={() => this.setState({ fade: false })}
  > {this.state.value} </div>);

并使用 onAnimationEnd 设置一些会影响该逻辑的状态变量。

然后在 CSS 中添加这样的渐变逻辑：

.blink-red {
  animation: redtotransparent 3s ease 5s;
}

@keyframes redtotransparent {
  from {
    background-color: red;
    color: white;
  }
  to {
    background-color: transparent;
    color: black;
  }
}

它仍然不完美，但已经差不多了。更改密钥会使 React 认为 DOM 已更改。当我想出更好的东西时，我会在这里添加。

Answer 2

单击顶部下拉列表中的闪烁单元格选项，然后您可以选择不同的颜色进行向上更改和向下更改。您还可以设置闪烁的时间。