Angular10 Animation animate()用法及代碼示例

在本文中，我們將了解 Angular 10 中的動畫以及如何使用它。

這個動畫在 Angular10 中用於 d定義一個動畫步驟，結合樣式信息和時間信息

用法:

animate(timings | styles)

NgModule:animate 使用的模塊是：

animations

方法：

創建要使用的 angular 應用程序
在 app.module.ts 中導入 BrowserAnimationsModule
在 app.component.html 中創建一個包含動畫元素的 div。
在 app.component.ts 中導入要使用的觸發器、狀態、樣式、過渡、動畫。
使用包含時間和樣式的 animation() 製作動畫。
使用 ng serve 為 angular 應用程序提供服務以查看輸出

參數：

timing:為父動畫設置 AnimateTimings
styles:為父動畫設置 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';
  }
}

應用程序組件.html


<h1>GeeksforGeeks</h1>
<button (click)='anim()'>Animate</button>
<div 
  style="width:100px; height:100px"
  [@gfg]='state'>
</div>

輸出：

參考：https://angular.io/api/animations/animate

相關用法

注：本文由純淨天空篩選整理自taran910大神的英文原創作品 Angular10 Animation animate() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。