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的更多相关文章

  1. [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 ...

  2. [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 ...

  3. 优雅地实现CSS Animation delay

    今天写一个css动画时遇到一个有意思的问题,记录如下: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画 ...

  4. 优雅地实现CSS Animation delay心得

    话不多说直接开讲: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画属性上加上delay(延迟,使得这个 ...

  5. angular2.0入门---webStorm创建angular CLI项目

    创建项目之前需要先安装angular cli,(angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli).打开命令窗口输入 npm instal ...

  6. [Angular2 Animation] Basic animation

    @Component({ selector: 'app-courses', templateUrl: './courses.component.html', styleUrls: ['./course ...

  7. [Angular2 Form] Style Validation in Angular 2 Forms

    Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each ...

  8. [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. ...

  9. [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 ...

随机推荐

  1. zhizhang错误(每天更新更新)

    做题反思(Think twice ,Code once) 1.2013NOIP转圈游戏,交代码前一定要静态查错,看看代码写得和自己意思一不一样,竟然把变量n写成了常数10,低级错误 2.2013NOI ...

  2. absolute、relative,toggle()

    測试代码例如以下: <div> <div class="global">不应用样式</div> <div class="glob ...

  3. zendiscovery 的Ping机制

    ping是集群发现的基本手段,通过在网络上广播或者指定ping某些节点获取集群信息,从而可以找到集群的master加入集群.zenDiscovery实现了两种凭机制:广播与单播.本篇将详细分析一些这M ...

  4. 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 ...

  5. 二、Docker基础操作

    原文:二.Docker基础操作 一.下载镜像 命令:docker pull xxxxxx(镜像名) docker pull training/weapp 二.运行镜像 docker run -d -P ...

  6. spring+mybatis+Atomikos JTA事务配置说明

    一.概览 Atomikos是一个公司名字,旗下最著名的莫过于其Atomikos的事务管理器产品.产品分两个:一个是开源的TransactionEssentials,一个是商业的ExtremeTrans ...

  7. 1.1 Introduction中 Guarantees官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Guarantees Kafka的保证(Guarantees) At a high- ...

  8. 关于python的序列和矩阵运算的写法

    #其实下面是这样一个函数,传入的是obj_value,传出的是newobj_value.,, #这里的obj_value实际上是一个序列... for z in obj_value:          ...

  9. php网页跳转无法获取session值

    今日编写项目,需要在跳转后的页面获取session值进行自动登录操作,但是明明在传输页面可以打印出session值,但在接受页面却显示session值为空,经确认脚本中的session_start() ...

  10. 在linux环境下增加别名

    编辑.cshrc文件:gvim ~/.cshrc 增加要添加的别名,例如:alias la 'ls -a' qw保存退出 source ~/.cshrc即可生效