1.理解ng2的动画

angular2的动画实际上是先定义若干个状态（一般就俩状态），然后元素在这若干个状态中变换。所以要记住俩东西 1. 状态 2. 状态之间的变换

2.使用ng2动画

1.首先要引入接口。

import { trigger,state,style,transition,animate,keyframes} from '@angular/core'; 这里这些类具体干什么暂时先不写了，因为我也没完全搞懂，但是大多数看名字就能猜到一二。比如trigger触发，state状态，style样式等。

2.定义动画

export const animateName = trigger('triggerName', state('stateName_1',style({//state1-style})), state('stateName_2',style({//state2-style})), transition('stateName_1 => stateName_2',animate(100ms easy-in)), transition('stateName_2 => stateName_1',animate(100ms easy-out)) )

3.使用动画

//首先在要使用动画的组件中引入动画 import { animate } './animate.ts'; ... @Component({ ... //将动画挂载到元素上 template:` <el [@triggerName]>...</el> ` ... //组件中的animations数组对象传入引入的动画 animations:[ animate ] })

3.动画详解

在第二部分中，我们完整的使用了一个动画。但最难最复杂的还是定义动画，这部分内容就来讲讲定义动画的那些事儿。

上面定义动画部分的代码看似内容很多，配置复杂。但把它理清后会觉得也不是那么难记住。

1.trigger(触发) 首先动画是包在触发器里的。所以我们要先定义一个trigger

说明

trigger()方法接受两个参数： params1:String 动画标识符 params2:Array 多个状态、转场的数组。 trigger('animateName',[state(),state()...,transition(),transition...]);

使用

trigger=('flyInLeft',[ state(), state(), ... transition(), transition(), ... ])

2.state（状态） state比较好理解，就是某一状态下元素有不同的样式。例如左边飞入动画，它有两个状态，一个是在屏幕左边看不见的位置，另一个在屏幕中显示的位置，这就是两个状态。从第一个状态到第二个状态的转场也就形成了动画。

说明

state()方法接收两个参数： param1:String 状态名称 param2:Object style方法 state('stateName',style({}))

使用

state('hide', style({})), state('show', style({}))

3.transition（转场） 转场也就是由一个状态过度到另外一个状态的过程。

说明

transition()方法接受两个参数： param1:String 状态1 => 状态2 param2:Object animate方法 transition('hide => show', animate()), transition('show => hide', animate())

注意 1. *（通配符）状态 *状态匹配任何动画状态。当定义那些不需要管当前处于什么状态的样式及转场时，这很有用。

2.void状态 void状态表示元素没有被附加到视图。这种情况可能是由于它尚未被添加进来或者已经被移除了。