[Angular2 Animation] Basic animation

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css'],
  animations: [
    trigger('courseHover', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('300ms ease-in')),
      transition('active => inactive', animate('300ms ease-out'))
    ])
  ]
})

Animation start in 'trigger' function. Give a name call 'courseHover'.

Animation also define 'state', and using 'transition' to animte the state.

<table>
  <tr *ngFor="let course of (allCourses | async)" [@courseHover]="course.hover" (mouseenter)="course.hover='active'"
      (mouseleave)="course.hover='inactive'">
    <td class="column course-icon">
      <img [src]="course?.iconUrl">
    </td>
    <td class="column course-description">
      {{course.description}}
    </td>
    <td>
      <button [routerLink]="course.url">View</button>
    </td>
  </tr>
</table>

So when mouse enter and mouse leave we set 'course.hover' to 'active' or 'inactive'.

[@courseHover]="course.hover"

Apply 'courseHover' animation acoording to the 'course.hover'.

 

Github