Angular10 动画 animate()函数

在本文中，我们将了解 Angular 10 中的动画以及如何使用它。

Angular10 中的animate用于定义一个将样式信息与时序信息相结合的动画步骤

句法：

animate(timings | styles)

NgModule： animate 使用的模块是：

• 动画

方法：

• 创建要使用的 Angular 应用程序
• 在 app.module.ts 中导入 BrowserAnimationsModule
• 在 app.component.html 中创建一个包含动画元素的 div。
• 在 app.component.ts 中导入要使用的触发器、状态、样式、过渡、动画。
• 使用包含时间和样式的动画（）制作动画。
• 使用 ng serve 为 Angular 应用程序服务以查看输出

参数：

• 计时：为父动画设置 AnimateTimings
• 样式：为父动画设置 AnimationStyles

返回值：

• AnimationAnimateMetadata：封装动画步骤的对象

示例 1：

app.module.ts

import { LOCALE_ID, NgModule } 
       from '@angular/core';
import { BrowserModule }
       from '@angular/platform-browser';
import {BrowserAnimationsModule}
       from '@angular/platform-browser/animations';
import { AppRoutingModule }
       from './app-routing.module';
import { AppComponent } 
       from './app.component';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [
      { provide: LOCALE_ID, useValue: 'en-GB' },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

app.component.ts

import { trigger, state,
style, transition, animate }
       from '@angular/animations';
import { Component } from '@angular/core';
  
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('gfg',[
      state('normal', style({
        'background-color': 'red',
        transform: 'translateX(0)'
      })),
      state('highlighted', style({
        'background-color': 'blue',
        transform: 'translateX(0)'
      })),
      transition('normal => highlighted',animate(1200)),
      transition('highlighted => normal',animate(1000))
    ])
  ]
})
export class AppComponent  {
  state = 'normal';
  anim(){
    this.state == 'normal' ? 
    this.state = 'highlighted' : this.state = 'normal';
  }
}

app.component.html

GeeksforGeeks
Animate