Ag-Grid React：如何减慢行动画速度？

Ag-Grid本身没有提供直接调整行动画速度的配置参数，但可以通过自定义CSS覆盖默认的过渡动画规则来实现：

• 直接修改Ag-Grid行元素的过渡属性时长：

/* 全局调整所有行的基础动画速度 */
.ag-row {
  transition: transform 0.5s, opacity 0.5s !important;
}

/* 单独调整行插入时的动画速度 */
.ag-row-insert {
  transition: transform 0.5s, opacity 0.5s !important;
}

/* 单独调整行删除时的动画速度 */
.ag-row-remove {
  transition: transform 0.5s, opacity 0.5s !important;
}

• 将这段CSS代码添加到项目的全局样式文件（比如index.css）中，或者组件的样式文件内。如果使用CSS Modules，需要确保选择器的优先级足够覆盖Ag-Grid的默认样式。

注：Ag-Grid默认的行动画时长是0.2秒，你可以根据需求把0.5s替换成任意时长（比如1s对应1秒的动画）。!important是为了强制自定义样式优先级高于框架默认样式。

如果你的项目用了CSS-in-JS方案（比如Styled Components），也可以通过对应方式注入上述样式规则，同样能达到调整速度的效果。

内容的提问来源于stack exchange，提问作者bugZ