1. @Component({
  2. selector: 'app-courses',
  3. templateUrl: './courses.component.html',
  4. styleUrls: ['./courses.component.css'],
  5. animations: [
  6. trigger('courseHover', [
  7. state('inactive', style({
  8. backgroundColor: '#eee',
  9. transform: 'scale(1)'
  10. })),
  11. state('active', style({
  12. backgroundColor: '#cfd8dc',
  13. transform: 'scale(1.1)'
  14. })),
  15. transition('inactive => active', animate('300ms ease-in')),
  16. transition('active => inactive', animate('300ms ease-out'))
  17. ])
  18. ]
  19. })

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

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

  1. <table>
  2. <tr *ngFor="let course of (allCourses | async)" [@courseHover]="course.hover" (mouseenter)="course.hover='active'"
  3. (mouseleave)="course.hover='inactive'">
  4. <td class="column course-icon">
  5. <img [src]="course?.iconUrl">
  6. </td>
  7. <td class="column course-description">
  8. {{course.description}}
  9. </td>
  10. <td>
  11. <button [routerLink]="course.url">View</button>
  12. </td>
  13. </tr>
  14. </table>

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

  1. [@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. 3.常用Bracket插件

    转自:https://blog.csdn.net/iso_wsy/article/details/52608205 1.Emmet 如果你从事Web前端开发的话,对该插件一定不会陌生.它可以加快你的 ...

  2. JOISC 2018 Day 2 最差记者3

    JOISC 2018 Day 2 最差记者3 题意: ​ 数轴上有\(N\)个选手和一个旗手,旗手在位置\(0\)<第\(i\)人的位置为\(-i\),每个选手有一个参数\(D_i\).旗手每单 ...

  3. BZOJ4712: 洪水(树链剖分维护Dp)

    Description 小A走到一个山脚下,准备给自己造一个小屋.这时候,小A的朋友(op,又叫管理员)打开了创造模式,然后飞到 山顶放了格水.于是小A面前出现了一个瀑布.作为平民的小A只好老实巴交地 ...

  4. 【Django】缓存

    由于Django是动态网站,所以每次请求都会去数据库中进行响应的操作. 当程序访问量大时,耗时必然会更加明显,最简单的解决方案就是使用缓存. Django中的缓存: ==即将某一个view的返回值保存 ...

  5. ManagementObjectSearcher 对象获取串口列表

    首先,需引用using System.Management; 可先建个枚举类,如下 #region WIN32 API /// <summary> /// 枚举win32 api /// ...

  6. [TypeScript] Make Properties and Index Signatures Readonly in TypeScript

    TypeScript 2.0 introduced the readonly modifier which can be added to a property or index signature ...

  7. hdu4336Card Collector 概率dp+状态压缩

    //给n个卡片每次出现的概率,求全部卡片都出现的须要抽的次数的期望 //dp[i]表示在状态的情况下到全部的卡片都出现的期望 //dp[i] = 1 + p1*dp[i] + ${p2[j]*dp[i ...

  8. 例说linux内核与应用数据通信(四):映射设备内核空间到用户态

    [版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet.文章仅供学习交流,请勿用于商业用途]         一个进程的内存映象由以下几部分组成:代码段.数据段.BSS段和 ...

  9. 记阮一峰---JavaScript 标准参考教程之标准库-Object对象

    在看到阮大神的-标准库-Object对象时 有个 类型判断类型 方法可能以后会用到.特此记录一下 4.3:toString()的应用:判断数据类型 Object.prototype.toString方 ...

  10. interpolator-动画执行方式

    动画中有一个属性是设置动画执行的方式, <?xml version="1.0" encoding="utf-8"?> <set xmlns:a ...