[Angular2 Animation] Delay and Ease Angular 2 Animations
By default, transitions will appear linearly over time, but proper animations have a bit more customization to them by delaying when they start and controlling how slowly or quickly they move over time.
animations:[
trigger('signal', [
state('void', style({
'transform':'translateY(-100%)'
})),
state('go', style({
'background-color':'green',
'height':'100px'
})),
state('stop', style({
'background-color':'red',
'height':'50px'
})),
transition('* => *', animate('2s 1s cubic-bezier(0.455, 0.03, 0.515, 0.955)'))
])
]
Duration 2s, Delay 1s.
[Angular2 Animation] Delay and Ease Angular 2 Animations的更多相关文章
- [Angular2 Animation] Use Keyframes for Fine-Tuned Angular 2 Animations
When easing isn’t enough to get the exact animation you want, you can leverage keyframes to define a ...
- [Angular2 Animation] Control Undefined Angular 2 States with void State
Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your curr ...
- 优雅地实现CSS Animation delay
今天写一个css动画时遇到一个有意思的问题,记录如下: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画 ...
- 优雅地实现CSS Animation delay心得
话不多说直接开讲: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画属性上加上delay(延迟,使得这个 ...
- angular2.0入门---webStorm创建angular CLI项目
创建项目之前需要先安装angular cli,(angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli).打开命令窗口输入 npm instal ...
- [Angular2 Animation] Basic animation
@Component({ selector: 'app-courses', templateUrl: './courses.component.html', styleUrls: ['./course ...
- [Angular2 Form] Style Validation in Angular 2 Forms
Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each ...
- [Angular2 Router] Use Params from Angular 2 Routes Inside of Components
Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. ...
- [Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive
You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a ...
随机推荐
- zhizhang错误(每天更新更新)
做题反思(Think twice ,Code once) 1.2013NOIP转圈游戏,交代码前一定要静态查错,看看代码写得和自己意思一不一样,竟然把变量n写成了常数10,低级错误 2.2013NOI ...
- absolute、relative,toggle()
測试代码例如以下: <div> <div class="global">不应用样式</div> <div class="glob ...
- zendiscovery 的Ping机制
ping是集群发现的基本手段,通过在网络上广播或者指定ping某些节点获取集群信息,从而可以找到集群的master加入集群.zenDiscovery实现了两种凭机制:广播与单播.本篇将详细分析一些这M ...
- HDU4630-No Pain No Game(离线,线段树)
Problem Description Life is a game,and you lose it,so you suicide. But you can not kill yourself bef ...
- 二、Docker基础操作
原文:二.Docker基础操作 一.下载镜像 命令:docker pull xxxxxx(镜像名) docker pull training/weapp 二.运行镜像 docker run -d -P ...
- spring+mybatis+Atomikos JTA事务配置说明
一.概览 Atomikos是一个公司名字,旗下最著名的莫过于其Atomikos的事务管理器产品.产品分两个:一个是开源的TransactionEssentials,一个是商业的ExtremeTrans ...
- 1.1 Introduction中 Guarantees官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Guarantees Kafka的保证(Guarantees) At a high- ...
- 关于python的序列和矩阵运算的写法
#其实下面是这样一个函数,传入的是obj_value,传出的是newobj_value.,, #这里的obj_value实际上是一个序列... for z in obj_value: ...
- php网页跳转无法获取session值
今日编写项目,需要在跳转后的页面获取session值进行自动登录操作,但是明明在传输页面可以打印出session值,但在接受页面却显示session值为空,经确认脚本中的session_start() ...
- 在linux环境下增加别名
编辑.cshrc文件:gvim ~/.cshrc 增加要添加的别名,例如:alias la 'ls -a' qw保存退出 source ~/.cshrc即可生效