[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'.
[Angular2 Animation] Basic animation的更多相关文章
- Animation & Property Animation 使用
本篇主要讲Animation 和 Property Animation的使用,最后会讲QQ管家桌面火箭作为例子: 在Android中开发动效有两套框架可以使用,分别为 Animation 和 Prop ...
- Android动画总结#补间动画(Tween Animation/View Animation) #帧动画(Frame Animation/Drawable Animation)#属性动画(PropertyAnimation)
1.共有三种动画,英文名字多种叫法如下 第一种动画:补间动画(Tween Animation/View Animation) 四个:RotateAnimation旋转. AlphaAnimation透 ...
- angular2 学习笔记 ( animation 动画 )
refer : https://angular.io/guide/animations https://github.com/angular/angular/blob/master/packages/ ...
- Unity Animation.CrossFade Animation.Play
using System.Collections; using System.Collections.Generic; using UnityEngine; public class PlayerCo ...
- [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 ...
- CSS animation & CSS animation 101
CSS animation 101 如何为 Web 添加动画效果. https://github.com/cssanimation/css-animation-101 https://github.c ...
- Java性能提示(全)
http://www.onjava.com/pub/a/onjava/2001/05/30/optimization.htmlComparing the performance of LinkedLi ...
- iOS Programming Controlling Animations 动画
iOS Programming Controlling Animations 动画 The word "animation" is derived from a Latin wor ...
- Facebook POP 进阶指南
本文转自Kevin Blog Facebook 在发布了 Paper 之后,似乎还不满足于只是将其作为一个概念性产品,更进一步开源了其背后的动画引擎 POP,此举大有三年前发布的 iOS UI 框架 ...
随机推荐
- 3.常用Bracket插件
转自:https://blog.csdn.net/iso_wsy/article/details/52608205 1.Emmet 如果你从事Web前端开发的话,对该插件一定不会陌生.它可以加快你的 ...
- JOISC 2018 Day 2 最差记者3
JOISC 2018 Day 2 最差记者3 题意: 数轴上有\(N\)个选手和一个旗手,旗手在位置\(0\)<第\(i\)人的位置为\(-i\),每个选手有一个参数\(D_i\).旗手每单 ...
- BZOJ4712: 洪水(树链剖分维护Dp)
Description 小A走到一个山脚下,准备给自己造一个小屋.这时候,小A的朋友(op,又叫管理员)打开了创造模式,然后飞到 山顶放了格水.于是小A面前出现了一个瀑布.作为平民的小A只好老实巴交地 ...
- 【Django】缓存
由于Django是动态网站,所以每次请求都会去数据库中进行响应的操作. 当程序访问量大时,耗时必然会更加明显,最简单的解决方案就是使用缓存. Django中的缓存: ==即将某一个view的返回值保存 ...
- ManagementObjectSearcher 对象获取串口列表
首先,需引用using System.Management; 可先建个枚举类,如下 #region WIN32 API /// <summary> /// 枚举win32 api /// ...
- [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 ...
- hdu4336Card Collector 概率dp+状态压缩
//给n个卡片每次出现的概率,求全部卡片都出现的须要抽的次数的期望 //dp[i]表示在状态的情况下到全部的卡片都出现的期望 //dp[i] = 1 + p1*dp[i] + ${p2[j]*dp[i ...
- 例说linux内核与应用数据通信(四):映射设备内核空间到用户态
[版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet.文章仅供学习交流,请勿用于商业用途] 一个进程的内存映象由以下几部分组成:代码段.数据段.BSS段和 ...
- 记阮一峰---JavaScript 标准参考教程之标准库-Object对象
在看到阮大神的-标准库-Object对象时 有个 类型判断类型 方法可能以后会用到.特此记录一下 4.3:toString()的应用:判断数据类型 Object.prototype.toString方 ...
- interpolator-动画执行方式
动画中有一个属性是设置动画执行的方式, <?xml version="1.0" encoding="utf-8"?> <set xmlns:a ...