（ag-grid）动画动态添加的列答案

【问题标题】：(ag-grid) Animate dynamically added columns（ag-grid）动画动态添加的列
【发布时间】：2019-03-28 06:57:26
【问题描述】：

正如我们在https://www.ag-grid.com/javascript-grid-column-menu/ 上看到的，当用户从菜单中选中/取消选中某一列时，网格会为其他列设置动画。

我正在使用 columnDefs 动态地引入一些列：

this.columnDefs = [
  { headerName: 'Name', field: 'name', width: 200 },
  { headerName: 'S01F01', hide: this.solver !== 'solver1', field: 'age', width: 90, suppressToolPanel: true },
  ...
];

我已将隐藏/显示标志绑定到 UI 上的按钮，这些按钮将在需要时将一组列带入网格。尽管列正确显示，但它们只是出现而不是动画到网格中。我理解这是因为每次用户单击按钮时我只是更新整个网格的 columnDefs。

有没有办法让我在单击按钮时显示这些列，同时触发动画？

【问题讨论】：

标签： ag-grid ag-grid-ng2

【解决方案1】：

除非您有此网格属性suppressColumnMoveAnimation=true，否则列应该默认启用动画。
根据docs

默认开启列动画，关闭行动画默认。这是为了与预期最常见的内容保持一致默认配置。

【讨论】：

这是有道理的，但在我的情况下并没有发生。你可以看到我用来更新下面列的具体代码：toggleChange(event) { const toggle = event.source; if (toggle) { const groupbutton = toggle.buttonToggleGroup; if (event.value.some(item => item === toggle.value)) { groupbutton.value = [toggle.value]; } } this.solver = toggle ? toggle.value : ''; this.setColumnDefs(); }setColumnDefs = () => { this.columnDefs = [ { headerName: 'Name', field: 'name', width: 200 }, ... ]}