@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

[Angular2 Animation] Basic animation的更多相关文章

  1. Animation & Property Animation 使用

    本篇主要讲Animation 和 Property Animation的使用,最后会讲QQ管家桌面火箭作为例子: 在Android中开发动效有两套框架可以使用,分别为 Animation 和 Prop ...

  2. Android动画总结#补间动画(Tween Animation/View Animation) #帧动画(Frame Animation/Drawable Animation)#属性动画(PropertyAnimation)

    1.共有三种动画,英文名字多种叫法如下 第一种动画:补间动画(Tween Animation/View Animation) 四个:RotateAnimation旋转. AlphaAnimation透 ...

  3. angular2 学习笔记 ( animation 动画 )

    refer : https://angular.io/guide/animations https://github.com/angular/angular/blob/master/packages/ ...

  4. Unity Animation.CrossFade Animation.Play

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class PlayerCo ...

  5. [Angular] Two ways to create Angular Animation, using animation() or using state()

    We have two blocks to show to difference ways to do animation in Angular: <button (click)="t ...

  6. CSS animation & CSS animation 101

    CSS animation 101 如何为 Web 添加动画效果. https://github.com/cssanimation/css-animation-101 https://github.c ...

  7. Java性能提示(全)

    http://www.onjava.com/pub/a/onjava/2001/05/30/optimization.htmlComparing the performance of LinkedLi ...

  8. iOS Programming Controlling Animations 动画

    iOS Programming Controlling Animations 动画 The word "animation" is derived from a Latin wor ...

  9. Facebook POP 进阶指南

    本文转自Kevin Blog Facebook 在发布了 Paper 之后,似乎还不满足于只是将其作为一个概念性产品,更进一步开源了其背后的动画引擎 POP,此举大有三年前发布的 iOS UI 框架  ...

随机推荐

  1. js ---- 函数防抖

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  2. 利用css去除input按钮上的文字的几种方法

    相信很多时候input上的文字困扰着web前端开发者,必须要通过修改html代码中的value值才能清空按钮上的文字,但很多人不愿意去动html代码,一方面麻烦,另外主要的原因还在于保留文字对seo有 ...

  3. 小米开源文件管理器MiCodeFileExplorer-源码研究(3)-使用最多的工具类Util

    Util.java,使用最广泛~代码中很多地方,都写了注释说明~基本不需要怎么解释了~ package net.micode.fileexplorer.util; import java.io.Fil ...

  4. 【原创】k8s源代码分析-----EndpointController

    转自本人空间 http://user.qzone.qq.com/29185807/blog/1459325937 一.controller manager创建endpointController 代码 ...

  5. 使用 Bluemix™ Live Sync 高速更新 Bluemix 上执行的应用程序实例

    假设您要构建 Node.js 应用程序,那么能够使用 IBM® Bluemix® Live Sync 高速更新 Bluemix 上的应用程序实例,并像在桌面上进行操作一样进行开发,而无需又一次部署.执 ...

  6. VPS 上线监控监控脚本

    文件地址 https://github.com/yourshell/yisuo-script/blob/master/vpstz/vpsmon.zip https://download.csdn.ne ...

  7. wordpress 加速主题的静态资源

    wordpress 加速主题的静态资源(固定的CSS.JS和图片等) wordpress 中用函数 get_stylesheet_directory_uri() 生成当前主题的 URL , 格式如 h ...

  8. 类名引用static变量好处

    不仅强调了变量static的结构,而且在有些情况下他还为编译器进行优化提供了更好的机会.

  9. C#中流,字节,字符,字符串

    首先要明白它们本身是由什么组成的: 流:二进制 字节:无符号整数 字符:Unicode编码字符 字符串:多个Unicode编码字符 那么在.net下它们之间如何转化呢? 一般是遵守以下规则: 流-&g ...

  10. Java 批量修改文件后缀

    import java.io.*; public class test { public void reName(String path, String from, String to) { File ...