在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule” - Javascript

简介

当您构建使用 Angular 框架的应用程序时，您可能已经在网站的主要元素之间使用动画来提高用户体验和引导他们在网站上的导航。

一个动画的过渡非常重要，因为它帮助用户更轻松地理解界面上发生的更改，并可视化操作的反馈。Angular 为用户提供了两种内置方式来管理动画：BrowserAnimationsModule 和 NoopAnimationsModule。

本文将为您提供一些详细说明，帮助您在您的应用程序中评估和使用这些功能。

BrowserAnimationsModule

BrowserAnimationsModule 是一个允许在应用程序中使用动画效果的扩展库。它通过 @angular/platform-browser/animations package 为 Angular 中的 AnimationBuilder 和 Renderer 提供了支持。该模块允许您使用 Angular Material 和其他第三方库，以及使用内置的 @angular/animations 库提供的各种 JavaScript 和 CSS 动画。

您需要使用 BrowserAnimationsModule 来完全获得 @angular/animations 库的支持。当您并不需要在您的应用程序中使用任何动画时，您可以选择 NoopAnimationsModule，它将相应地 "忽略" 动画并使应用程序更快。

// 导入 BrowserModule 和 BrowserAnimationsModule
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

NoopAnimationsModule

NoopAnimationsModule 允许您在您的应用程序中使用 Angular 的动画 API，但它会略过实际的动画过渡，因此它在开发期间可以更快地进行测试和调试。

// 导入 BrowserModule 和 NoopAnimationsModule
import { BrowserModule } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NoopAnimationsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

结论

在开发动态和交互性应用时，使用动画过渡是一个必不可少的工具。Angular 提供了两种选项，BrowserAnimationsModule 和 NoopAnimationsModule，让您轻松添加或忽略动画效果。这可以使您能够更快地开发和测试您的应用程序，并且最终可以使您的应用程序更具吸引力和更易于使用。