Angular 2 Angular2 Animations Basic Animation - Transitions an element between two states driven by a model attribute.
Example
app.component.html
<div>
<div>
<div *ngFor="let user of users">
<button
class="btn"
[@buttonState]="user.active"
(click)="user.changeButtonState()">{{user.firstName}}</button>
</div>
</div>
</div>
app.component.ts
import {Component, trigger, state, transition, animate, style} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: [`
.btn {
height: 30px;
width: 100px;
border: 1px solid rgba(0, 0, 0, 0.33);
border-radius: 3px;
margin-bottom: 5px;
}
`],
animations: [
trigger('buttonState', [
state('true', style({
background: '#04b104',
transform: 'scale(1)'
})),
state('false', style({
background: '#e40202',
transform: 'scale(1.1)'
})),
transition('true => false', animate('100ms ease-in')),
transition('false => true', animate('100ms ease-out'))
])
]
})
export class AppComponent {
users : Array<User> = [];
constructor(){
this.users.push(new User('Narco', false));
this.users.push(new User('Bombasto',false));
this.users.push(new User('Celeritas', false));
this.users.push(new User('Magneta', false));
}
}
export class User {
firstName : string;
active : boolean;
changeButtonState(){
this.active = !this.active;
}
constructor(_firstName :string, _active : boolean){
this.firstName = _firstName;
this.active = _active;
}
}
