标签：
@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‘.
[Angular2 Animation] Basic animation
标签：
原文地址：http://www.cnblogs.com/Answer1215/p/5971924.html
