##EnterAnimation进场动画

Feature

• support ie10+,chrome,firefox,safari

install

用法

<<<<<<< HEAD
var EnterAnimation = require('enter-animation');
var React = require('react');
React.render(<EnterAnimation>
=======
<EnterAnimation>
>>>>>>> cb42e18b66b5110e16319cd8b507b1c46dffcf8b
  <div key='demo'>
    <div>依次进场</div>
    <div>依次进场</div>
    <div>依次进场</div>
    <div>依次进场</div>
<<<<<<< HEAD
  </div>,container)
=======
  </div>
>>>>>>> cb42e18b66b5110e16319cd8b507b1c46dffcf8b
</EnterAnimation>

api

动画默认right

EnterAnimation标签下：

|参数 |类型 |详细 | |-----------------|-------|----------------------------------------------------| |enter|object|管理进场数据| |leave|object|管理当前元素出场的数据,默认null,null继承上面所有标签的值 | |component|string|EnterAnimation替换的标签名| |routeDirection|string|route时需要| |routeCallBack|function|route时需要|

enter={} or leave={}

|参数 |类型 |详细 | |-----------------|-------|----------------------------------------------------| |type|string|执行动画的内置参数，默认；right | |style|object/string|同上，style的样式动画,type有值，此项无效， 默认null| |duration |number |每个动画的时间；默认0.5| |delay |number|整个区块的延时，默认为0；同startAnimation的delay| |reverse |boolean|是否倒放,从最后一个dom开始往上播放,默认false| |ease |string|样式缓动;默认 cubic-bezier(0.165, 0.84, 0.44, 1);| |interval|number|递增延时值，默认0.1| |callback|function|动画完成后回调|

子dom标签下：

一级标签key:

|参数 |类型 |详细 | |-----------------|-------|----------------------------------------------------| |key|string|必需，控制进出场；|

二级标签或再下级标签:

|参数 |类型 |详细 | |-----------------|-------|----------------------------------------------------| |key |string|子节新增与去除必须，单进场可不用 | |enter-data |object |如下data值;| |leave-data |object |如上,如果为null，则继承enter-data和data-enter的所有参数|

注：如子节点有enter-data值，则只执行有enter-data的节点的动画; 如果标签上的enter-data没type||style，则执行EnterAnimation标签上的type||style;

EnterRouteGroup

控制route的进出场；

如:

var Page1 = React.createClass({
  render() {
    return
      <EnterAnimation {...this.props}>
      <h1>添加或删除时EnterChild才起效，进出场仍然是EnterAnimation的参数</h1>
      <p style={{background: "#fff000"}} enter-data={{type: 'left'}} key='1'><Link to="/page1">a link to page 2 </Link>我是页面2.</p>
      <p style={{background: "#fff000"}} enter-data={{type: 'left'}} key='2'><Link to="/page1">a link to page 2 </Link>我是页面2.</p>
      <p style={{background: "#fff000"}} enter-data={{type: 'left'}} key='3'><Link to="/page1">a link to page 2 </Link>我是页面2.</p>
      </EnterAnimation>
  }
});
<EnterAnimation.EnterRouteGroup>
   <Page1 key='demo'/>
</EnterAnimation.EnterRouteGroup>

具体看demo,routerAdd.html;

##startAnimation的动画参数(EnterAnimation.to)；

页面进场动画的类，通过ＣＳＳ来快速完成页面刷新后的动画进场或子块的动画进场；

用法

参数说明

|参数 |类型 |详细 | |-----------------|-------|----------------------------------------------------| |node |string|要执行动画的dom（class,id）;必要; | |vars|object|动画参数 |

vars参数

|参数 |类型 |详细 | |-----------------|-------|----------------------------------------------------| |direction |"enter" |动画进场或出场样式,以enter``leave两值;默认为"enter"| |data |string / object|执行动画的参数，有object和string两种类型，下面详解；默认为null| |duration |0.5 |动画的时间；| |delay |number |整个区块的延时，默认为0；同startAnimation的delay| |ease |cubic-bezier(0.165, 0.84, 0.44, 1);|样式缓动;| |interval |递增延时值。默认0.1| |hideen |boolean|在开始动画前隐藏掉html,默认为true; | |reverse |boolean|是否倒放,从最后一个dom开始往上播放,默认false| |onComplete |function |动画完成后回调|

####data参数（string|object）;

data={}

|参数 |类型 |详细 | |-----------------|----------------|----------------------------------------------------| |enter|object|进场的样式| |leave|object|出场样式| |direction |string |动画进场或出场样式,以enter``leave两值;默认为"enter",有值覆盖vars参数的direction|

enter={} or leave={}

|参数 |类型 |详细 | |-----------------|-------|----------------------------------------------------| |type |string |内置动画样式：left right top bottom scale scaleFrom scaleX scaleY;| |style |object / string |style样式，如transform: translateX(100px),每个样式必须以;结束；type有值此项无效| |duration |vars参数的duration |动画的时间；有值覆盖vars参数的duration| |ease |vars参数的ease|样式缓动;有值覆盖vars参数的ease| |delay |0 |动画的延时;默认0,依照结构递增以上的interval| |queueId |0 |动画的线程，可为多线程|

支持style直接添加动画；

为string时，自动遍历node下的子节点来执行data样式；

为object时，树状形dom结构，以({})为一档标签； <<<<<<< HEAD 如：

<div class='a'>
  <div class='b'></div>
  <div class='c'></div>
</div>

node用的是".a",做b,c的动画，那data为：{}为最外层div;

如果元素为多个时：

<div class='a'>
 <ul>
   <li></li>
   <li></li>
   <li></li>
 </ul>
</div>

处理每个li里的span的动画时，data为:

=======

cb42e18b66b5110e16319cd8b507b1c46dffcf8b