使用：
<button [@heroState]="condition" (click)="condition=!condition">test</button>
声明：
import { Component } from '@angular/core';
import {
trigger,
state,
style,
animate,
transition
} from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('heroState', [
state('true', style({//定义状态
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('false', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('true => false', animate('100ms ease-in')),//状态变化的时候执行动画
transition('false => true', animate('100ms ease-out'))
])
]
})
export class AppComponent {
title = 'app';
condition = false;
}
模块：
imports: [
BrowserModule,
BrowserAnimationsModule
],
