/enter-animation

进场与出场动画

Primary LanguageJavaScript

组件不再更新,已重构成queue-anim;

##EnterAnimation进场动画

NPM version build status Test coverage gemnasium deps node version npm download

Feature

  • support ie10+,chrome,firefox,safari

install

enter-animation

用法

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

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-datatype||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);

页面进场动画的类,通过CSS来快速完成页面刷新后的动画进场或子块的动画进场;

用法


//js触发式:
var EnterAnimation=requre('enter-animation');
EnterAnimation.to(node,vars);

参数说明

参数 类型 详细
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结构,以({})为一档标签;