ag-grid enableCellChangeFlash属性不生效（单元格内容变化，动画提示效果）

问题描述：

ag-grid版本:

 "ag-grid-community": "^31.2.1",
 "ag-grid-enterprise": "^31.2.0",
 "ag-grid-react": "^31.2.0",

使用 ag-grid时 我需要做到数据更新时，单元格闪烁，有个动画，可以更明显的看出哪个有变化（如下图、视频）。

一变化就 背景色闪烁，这个功能是ag-grid本身就有的功能只需要 加上enableCellChangeFlash=true 和 getRowId（需要取数据里 唯一、不会重复的值。比如：id、key等等） 即可。
可以 给 defaultColDef 加 也可以直接在 AgGridReact 上加（但我 在 AgGridReact 加会提示一个警告 enableCellChangeFlash 已弃用
）。
ag-grid enableCellChangeFlash api

ag-grid enableCellChangeFlash 效果视频

具体效果 可查看ag-grid finance demo

遇到的问题：

我发现我加上没用，以下是我的代码：

 import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
const MyAgGridComponent = () => {
    const [rowData1,setRowData1] = useState([{
    id:1,
    value:3
  },{
    id:2,
    value:4
  }]);
   const AgStyle = {
    width:'100%',
    height:'calc(100vh - 370px)',
  }
    const defaultColDef1 = {
        sortable: true,
        enableCellChangeFlash: true,
    };
    const columnDefs1 = [
        { field: 'id', headerName: 'ID' },
        { field: 'value', headerName: 'Value' },
    ];
    const handleButtonClick = () => {
       setRowData1([{
            id:1,
            value:Math.random()
          },{
            id:2,
            value:Math.random()
          }])
    };
 const getRowStyle = function(params){
    return {
      backgroundColor: parseInt(params.node.rowIndex) % 2 == 0 ? '#fff' : '#F8FAFF'
    }
  }
    return (
        <div  className='ag-theme-quartz grid' style={AgStyle}>
            <button onClick={handleButtonClick}>点击</button>
            <AgGridReact
                columnDefs={columnDefs1}
                rowData={rowData1}
                defaultColDef={defaultColDef1} // 设置默认列定义
                animateRows={true}
                 getRowStyle={getRowStyle}
                getRowId={({data}) => { // 你数据里的key、id 唯一值不会重复的值
                    return data.id;
                }}
            />
        </div>
    );
};
export default MyAgGridComponent;

经过对比 官方的示例代码发现写的差不多，最后发现 是getRowStyle 的问题，他的优先级高，会覆盖变色的效果。
github react FinanceExample.tsx 示例代码

用 getRowClass 实现隔行变色：

const getRowClass = function(params){
    return parseInt(params.node.rowIndex) % 2 == 0 ? 'even-row' : 'odd-row'
  }
css 样式：
.even-row{
    background: gray !important;
}
.odd-row{
    background: white !important;
}

解决方案:

问题原因是：getRowStyle、getRowClass 的优先级比动画效果优先级高，所以解决方案就是 去掉 getRowStyle 或者getRowClass 属性。

但我的表格设计图效果是 隔行变色，如果不用getRowStyle 、getRowClass 的话只能用ag-grid 的原有类名覆盖它。

只需要 在css里写上：

.ag-row-odd{
  background: gray !important;
}
.ag-row-even{
  background: white !important;
}

如果怕影响全局的样式建议 在外面套一个 选择器（推荐还是 套一个 可以避免影响全局样式。如果覆盖其他样式 也应该如此）。 比如 在 AgGridReact 外面加上div 写上类名 grid。

 <div  className='ag-theme-quartz grid' style={AgStyle}>
            <button onClick={handleButtonClick}>点击</button>
            <AgGridReact
                columnDefs={columnDefs1}
                rowData={rowData1}
                defaultColDef={defaultColDef1} // 设置默认列定义
                animateRows={true}
                 getRowStyle={getRowStyle}
                getRowId={({data}) => { // 你数据里的key、id 唯一值不会重复的值
                    return data.id;
                }}
            />
        </div>

.grid .ag-row-odd{
  background: gray !important;
}
.grid .ag-row-even{
  background: white !important;
}

效果图：

正确的完整的代码：
我用的是企业版，付过费的，引入的包是企业的，如果你是社区版就按照官网引入社区版的包就行。
ag-grid 官网 可以用 edge浏览器翻译，或者安装一个插件 immersive-translate(沉浸式双语网页翻译扩展)，解决谷歌翻译无法使用问题

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
const MyAgGridComponent = () => {
    const [rowData1,setRowData1] = useState([{
    id:1,
    value:3
  },{
    id:2,
    value:4
  }]);
   const AgStyle = {
    width:'100%',
    height:'calc(100vh - 370px)',
  }
    const defaultColDef1 = {
        sortable: true,
        enableCellChangeFlash: true,
    };
    const columnDefs1 = [
        { field: 'id', headerName: 'ID' },
        { field: 'value', headerName: 'Value' },
    ];
    const handleButtonClick = () => {
       setRowData1([{
            id:1,
            value:Math.random()
          },{
            id:2,
            value:Math.random()
          }])
    };
 const getRowStyle = function(params){
    return {
      backgroundColor: parseInt(params.node.rowIndex) % 2 == 0 ? '#fff' : '#F8FAFF'
    }
  }
    return (
        <div  className='ag-theme-quartz grid' style={AgStyle}>
            <button onClick={handleButtonClick}>点击</button>
            <AgGridReact
                columnDefs={columnDefs1}
                rowData={rowData1}
                defaultColDef={defaultColDef1} // 设置默认列定义
                animateRows={true}
                getRowId={({data}) => { // 你数据里的key、id 唯一值不会重复的值
                    return data.id;
                }}
            />
        </div>
    );
};
export default MyAgGridComponent;

补充：

1.单元格更新，数据更新，滚动条滚动到顶部，不太合理。如果不想滚动到顶部可以加上：

suppressScrollOnNewData=true 即可。
suppressScrollOnNewData api

2. 动画的闪烁效果 闪烁时间都能设置 cellFadeDuration、cellFlashDuration:

animateRows api
cellFadeDuration:该属性控制单元格在更新（例如数据更改）后，由明显的显示状态变为完全透明的持续时间。
cellFlashDuration:该属性控制单元格在数据更新后闪烁的持续时间。通常，单元格会在更新时短暂闪烁，以引起用户的注意。

3.修改 动画的背景色（闪烁的颜色）。

方式一：使用css变量

通过官方的示例代码（从github clone下来），发现控制颜色的是–ag-value-change-value-highlight-background-color这个css变量控制的。

用div包裹 AgGridReact 给其加上 主题和自己的类名 .grid 然后加上–ag-value-change-value-highlight-background-color即可

 <div className='ag-theme-quartz grid' style={AgStyle}>
      <AgGridReact/>
 </div>     
css:
.grid{
    --ag-value-change-value-highlight-background-color:red;
}

方式二：使用类名覆盖.ag-value-change-value-highlight、.ag-cell-data-changed

.grid .ag-value-change-value-highlight,.ag-cell-data-changed {
        background: blue !important;
}

总结：

其他 样式同理也可以使用css变量或者直接用类名覆盖。