Animation binding @

You can build a simple animation that transitions an element between two states driven by a model attribute.

Animations can be defined inside @Component metadata.

Then using the [@triggerName] syntax, attach the animation that you just defined to one or more elements in the component's template.

Source

Click to change active state:
<ul>
  <li *ngFor="let hero of heroes"
      [@heroState]="hero.active ? 'active' : 'inactive'"
      (click)="hero.active = !hero.active">
    {{hero.name}}
  </li>
</ul>

@Component({
  ...
  animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)',
      })),
      state('active', style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)',
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out')),
    ]),
  ],
})
export class AppComponent {
  heroes = [
    {
      name: 'Superman',
      active: true,
    },
    {
      name: 'Batman',
      active: true,
    },
    {
      name: 'Aquaman',
      active: false,
    },
  ];
}

Result

Click to change active state:

Superman
Batman
Aquaman

Links & Tutorials