angular - BrowserAnimationsModule 和 NoopAnimationsModule 有什么区别？

Question

随着新的 Angular-Material 版本的发布，您需要为 Angular-Animations 添加一个模块。您可以在两个 BrowserAnimationsModule 和 NoopAnimationsModule 之间进行选择。 official guide状态:

Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

If you don't want to add another dependency to your project, you can use the NoopAnimationsModule.

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

我不太明白这里有什么区别。看起来完全一样 :) 这两个模块有什么区别？

Answer 1

正如名称 noop(“无操作”)所说，该模块不执行任何操作。它是一个实用程序模块，模拟真实的动画模块，但实际上并不制作动画。

这在动画速度太慢的平台上或用于测试(单元、集成、与 Cypress 的 e2e、Protractor 等)的平台上很方便，如果动画不涉及您实际想要测试的内容。

@NgModule({
  imports: [
    BrowserModule,
    environment.production ? BrowserAnimationsModule : NoopAnimationsModule,
    ...
   ]
   ...
}
export class AppModule {}