[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 框架 ...
随机推荐
- js ---- 函数防抖
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- 利用css去除input按钮上的文字的几种方法
相信很多时候input上的文字困扰着web前端开发者,必须要通过修改html代码中的value值才能清空按钮上的文字,但很多人不愿意去动html代码,一方面麻烦,另外主要的原因还在于保留文字对seo有 ...
- 小米开源文件管理器MiCodeFileExplorer-源码研究(3)-使用最多的工具类Util
Util.java,使用最广泛~代码中很多地方,都写了注释说明~基本不需要怎么解释了~ package net.micode.fileexplorer.util; import java.io.Fil ...
- 【原创】k8s源代码分析-----EndpointController
转自本人空间 http://user.qzone.qq.com/29185807/blog/1459325937 一.controller manager创建endpointController 代码 ...
- 使用 Bluemix™ Live Sync 高速更新 Bluemix 上执行的应用程序实例
假设您要构建 Node.js 应用程序,那么能够使用 IBM® Bluemix® Live Sync 高速更新 Bluemix 上的应用程序实例,并像在桌面上进行操作一样进行开发,而无需又一次部署.执 ...
- VPS 上线监控监控脚本
文件地址 https://github.com/yourshell/yisuo-script/blob/master/vpstz/vpsmon.zip https://download.csdn.ne ...
- wordpress 加速主题的静态资源
wordpress 加速主题的静态资源(固定的CSS.JS和图片等) wordpress 中用函数 get_stylesheet_directory_uri() 生成当前主题的 URL , 格式如 h ...
- 类名引用static变量好处
不仅强调了变量static的结构,而且在有些情况下他还为编译器进行优化提供了更好的机会.
- C#中流,字节,字符,字符串
首先要明白它们本身是由什么组成的: 流:二进制 字节:无符号整数 字符:Unicode编码字符 字符串:多个Unicode编码字符 那么在.net下它们之间如何转化呢? 一般是遵守以下规则: 流-&g ...
- Java 批量修改文件后缀
import java.io.*; public class test { public void reName(String path, String from, String to) { File ...