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