如何禁用ngx-datatable在Material主题下的路由切换动画？

我之前也碰到过一模一样的情况，Material主题默认的全局过渡/动画样式会意外作用在ngx-datatable的元素上，尤其是路由切换加载组件的时候。这里有几个精准的解决方案，你可以根据需求选：

方案1：直接覆盖ngx-datatable的动画样式（推荐） #

在你的表格组件样式文件（比如your-table.component.scss）里加这段代码，专门禁用表格相关元素的动画和过渡：

::ng-deep .ngx-datatable {
  animation: none !important;
}

::ng-deep .ngx-datatable .datatable-body-row,
::ng-deep .ngx-datatable .datatable-body-cell,
::ng-deep .ngx-datatable .datatable-header-cell {
  transition: none !important;
}

::ng-deep用来穿透Angular的组件样式隔离，确保样式能作用到ngx-datatable的内部元素；!important则强制覆盖Material主题的默认样式。

方案2：用Material的mixin全局禁用表格动画 #

如果你的项目已经全局导入了Material主题样式，可以在styles.scss里这么写，用Material自带的工具类禁用表格动画：

@import '@angular/material/theming';

.ngx-datatable {
  @include mat.disable-animations();
}

这个方法更贴合Material的样式规范，不需要用!important，但前提是你已经正确配置了Material的主题环境。

方案3：禁用组件或路由的全局动画 #

如果动画是路由切换时的组件进入动画导致的，可以直接在表格组件的装饰器里清空动画配置：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-table',
  templateUrl: './your-table.component.html',
  styleUrls: ['./your-table.component.scss'],
  animations: [] // 清空动画配置
})
export class YourTableComponent { }

或者在路由配置里给该路由标记禁用动画：

const routes: Routes = [
  { 
    path: 'your-table-path', 
    component: YourTableComponent,
    data: { animation: 'none' } // 添加禁用标记
  }
];

然后在根组件的路由出口动画逻辑里，判断路由数据中的animation字段，如果是none就不应用动画效果。

为啥Bootstrap主题没这个问题？ #

Bootstrap主题不会给所有元素默认加全局过渡/动画样式，而Material主题为了贴合Material Design的动效规范，会给不少基础元素（比如*通配符、常见容器）加默认过渡属性，这就导致ngx-datatable的元素被意外影响了。

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