📜  Angular10 动画过渡 API

📅  最后修改于: 2022-05-13 01:56:19.425000             🧑  作者: Mango

Angular10 动画过渡 API

在本文中,我们将了解 Angular 10 中的过渡以及如何使用它。

Angular10 中过渡用于为动画创建过渡,其中元素将从一种状态变为另一种状态。

句法:

transition (stateChangeExpr, steps, options)

NgModule:转换使用的模块是:

  • 动画

方法:

  • 创建要使用的 Angular 应用程序。
  • 在 app.module.ts 中导入 BrowserAnimationsModule。
  • 在 app.component.html 中创建一个包含动画元素的 div。
  • 在 app.component.ts 中导入要使用的触发器、状态、样式、过渡、动画。
  • 制作包含 stateChangeExpr、步骤、动画选项的转换。
  • 使用 ng serve 为 Angular 应用程序提供服务以查看输出。

参数:

  • stateChangeExpr:比较先前和当前动画状态的布尔表达式。
  • steps:动画返回的一个或多个动画对象。
  • options:一个选项对象,可以包含动画开始的延迟值

返回值:

  • AnimationTrasitionMetadata:封装新过渡数据的对象。

示例 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 { 
  // Transition is imported here
  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('geek',[     
      state('clr', style({
        'background-color': '#ff0000',
        transform: 'translateX(0)'
      })),
      state('clr1', style({
        'background-color': '#000000',
        transform: 'translateX(100px) translateY(100px) scale(0.3)'
      })),
  
      // transition is used here 
      transition('clr => clr1',animate(1600)),
      transition('clr1 => clr',animate(100))
    ])
  ]
})
export class AppComponent  {
  state = 'clr';
  anim(){
    this.state == 'clr' ? this.state = 'clr1' : this.state = 'clr';
  }
}


app.component.html

GeeksforGeeks





app.component.ts

import { 
  // Transition is imported here
  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('geek',[     
      state('clr', style({
        'background-color': '#ff0000',
        transform: 'translateX(0)'
      })),
      state('clr1', style({
        'background-color': '#000000',
        transform: 'translateX(100px) translateY(100px) scale(0.3)'
      })),
  
      // transition is used here 
      transition('clr => clr1',animate(1600)),
      transition('clr1 => clr',animate(100))
    ])
  ]
})
export class AppComponent  {
  state = 'clr';
  anim(){
    this.state == 'clr' ? this.state = 'clr1' : this.state = 'clr';
  }
}

app.component.html

GeeksforGeeks



输出:

参考: https://angular.io/api/animations/transition