Angular10 触发动画
在本文中,我们将了解 Angular 10 中的触发器是什么以及如何使用它。
Angular10 中的触发器用于创建包含动画状态和过渡的动画触发器。
句法:
animate(name | definations)
NgModule:触发器使用的模块是:
- 动画
方法:
- 创建一个要使用的 Angular 应用程序。
- 在 app.module.ts 中,导入 BrowserAnimationsModule。
- 在 app.component.html 中,创建一个包含动画元素的 div。
- 在 app.component.ts 中,导入要使用的触发器、状态、样式、过渡、动画。
- 使触发器包含动画的状态和转换。
- 使用 ng serve 为 Angular 应用程序提供服务以查看输出。
参数:
- 名称:设置一个识别字符串。
- definations:设置动画定义对象。
返回值:
- AnimationTriggerMetadata:封装触发器数据的对象。
例子:
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 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 is used here
trigger('geek',[
state('green', style({
'background-color': 'green',
transform: 'translateX(0)'
})),
state('blu', style({
'background-color': '#49eb34',
transform: 'translateX(0)'
})),
transition('green => blu',animate(1200)),
transition('blu => green',animate(1000))
])
]
})
export class AppComponent {
state = 'green';
anim(){
this.state == 'green' ?
this.state = 'blu' : this.state = 'green';
}
}
app.component.html
GeeksforGeeks
app.component.ts
import {
// Trigger 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 is used here
trigger('geek',[
state('green', style({
'background-color': 'green',
transform: 'translateX(0)'
})),
state('blu', style({
'background-color': '#49eb34',
transform: 'translateX(0)'
})),
transition('green => blu',animate(1200)),
transition('blu => green',animate(1000))
])
]
})
export class AppComponent {
state = 'green';
anim(){
this.state == 'green' ?
this.state = 'blu' : this.state = 'green';
}
}
app.component.html
GeeksforGeeks
输出:
参考: https://angular.io/api/animations/trigger