介绍

primeng 是一个基于 Angular 的组件库，提供了大量的 UI 组件，如表格、对话框、按钮等，能够更加快速简单地构建可视化应用。而 BrowserAnimationsModule 是一个官方提供的 Angular 动画模块，提供了如高亮、淡入淡出等动画效果，能够更加优美地显示组件的变化过程。primeng BrowserAnimationsModule 结合了这两个库，提供了更为完美的组件展示和交互效果。

安装

primeng BrowserAnimationsModule 需要使用 npm 进行安装。

在 Angular 项目的根目录执行以下命令进行安装：

npm install primeng @angular/animations --save

使用

引入样式

在 Angular 打开 styles.css 文件，添加以下内容：

@import '~primeng/resources/themes/vela-green/theme.css';
@import '~primeng/resources/primeng.min.css';
@import '~primeicons/primeicons.css';

引入 Module

为整个应用添加动画效果

在 app.module.ts 中添加以下内容：

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

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

为指定的组件添加动画效果

例如，为一个按钮添加动画效果：

import {Component} from '@angular/core';
import {trigger, state, style, transition, animate} from '@angular/animations';

@Component({
  selector: 'app-root',
  template: `
        <button [@btnState]="state" (click)="changeState()">Animate</button>
  `,
  animations: [
    trigger('btnState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active', style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]
})
export class AppComponent {
  state = 'inactive';

  changeState() {
    this.state = (this.state === 'active' ? 'inactive' : 'active');
  }
}

使用组件

在需要使用组件的模块中引入相应的组件即可。例如，在 app.module.ts 中：

import {TableModule} from 'primeng/table';

@NgModule({
  imports: [
    // ...
    TableModule
  ],
  // ...
})
export class AppModule { }

在组件的 HTML 文件中添加相应的标签即可。例如，添加一个表格：

<p-table [value]="cars">
  <ng-template pTemplate="header">
    <tr>
      <th>Year</th>
      <th>Brand</th>
      <th>Color</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-car>
    <tr>
      <td>{{car.year}}</td>
      <td>{{car.brand}}</td>
      <td>{{car.color}}</td>
    </tr>
  </ng-template>
</p-table>

以上是 primeng BrowserAnimationsModule 的简单介绍和使用方式。