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 我应该这样做：

"If you want to override how the flash presents itself (eg change the background color, or remove the animation) then override the relevant CSS classes."

有人知道怎么做吗？

Answer 1

单击顶部下拉菜单中的“闪烁单元格”选项，然后您可以选择不同的颜色来进行向上变化和向下变化。您还可以设置闪烁的时间。

Answer 2

我现在差不多明白了。我找到的答案是基于 CSS。为 blinking/stop-blinking 设置类名，例如：

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 已更改。当我想出更好的东西时，我会在这里添加。

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

AgGrid: How to blink cell in different color depending on change

reactjs

ag-grid

ag-grid-react