BrowserAnimationsModule - Javascript

简介

BrowserAnimationsModule是Angular框架中用于处理动画的一个模块，它使用Web Animations API来实现动画效果，而且兼容性良好。它可以帮我们创建非常流畅的Angular动画，比如路由转场，元素状态的变化等。

安装

在使用BrowserAnimationsModule前，需要先安装相应的依赖：

npm install --save @angular/animations
npm install --save @angular/platform-browser/animations

同时需要在项目中引入动画模块：

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

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

动画的使用

指令

在Angular中，我们可以使用@angular/animations模块中提供的指令来实现动画效果，比如NgIf、NgClass、NgStyle等等。下面以NgStyle指令为例，来演示如何使用@angular/animations模块实现动画效果：

<div [ngStyle]="{backgroundColor: isExpanded ? 'yellow' : 'white'}"
     (@fadeInOut.start)="animationStarted($event)" (@fadeInOut.done)="animationDone($event)"
     [@fadeInOut]="isExpanded ? 'expanded' : 'collapsed'">
         <p>Animation demo</p>
</div>

其中，@fadeInOut是我们自定义的动画名称，当条件isExpanded变化时，会根据条件变化来触发动画，当isExpanded为true时，触发的动画名称为expanded，否则为collapsed。

状态型动画

接下来，我们将演示如何使用@angular/animations模块来实现状态型动画。状态型动画，就是根据不同的状态，对元素的样式进行变化。我们以按钮的悬浮效果为例，演示如何使用状态型动画实现效果：

<button [@btnState]="btnState" (mouseenter)="hoverOver($event)" (mouseleave)="hoverOut($event)">Hover Over Me</button>

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

@Component({
  selector: 'app-root',
  template: `<button [@btnState]="btnState" (mouseenter)="hoverOver($event)" (mouseleave)="hoverOut($event)">Hover Over Me</button>`,
  animations: [
    trigger('btnState', [
      state('mouseOut', style({
        backgroundColor: '#4977a3',
        transform: 'scale(1)'
      })),
      state('mouseOver', style({
        backgroundColor: '#2e6da4',
        transform: 'scale(1.1)'
      })),
      transition('mouseOut <=> mouseOver', animate('0.3s ease-out')),
    ])
  ]
})

export class AppComponent {
  btnState: string = 'mouseOut';

  hoverOver(event: any) {
    this.btnState = 'mouseOver';
  }

  hoverOut(event: any) {
    this.btnState = 'mouseOut';
  }
}

在代码中，我们定义了两个状态：mouseOut和mouseOver，它们定义了在不同鼠标状态下，按钮的样式，当鼠标移入或者移出按钮时，我们通过在事件处理函数中修改btnState变量的值来触发动画效果。

结语

BrowserAnimationsModule是Angular框架中非常方便的一个动画模块，它可以帮助我们实现高质量的动画效果，降低开发成本，提升用户体验。