使用 rc-animate 快速对 react element 动画

原文： https://github.com/react-component/animate/blob/master/docs/zh-cn/intro.md

近期很多组件侧重于动画效果，而 react 一开始仅仅是有简单的支持，现在则是比较难理解的 react-motion，
在我看下还是 angular-animate 的 api 好用些. 这次刚好统一下组件动画，
抽取出 rc-animate 模块，通过该模块可以很方便得进行动画.

以下示例可见： http://react-component.github.io/animate/examples/

使用场景

css animation for single element

http://react-component.github.io/animate/examples/simple.html

对单个元素根据状态进行动画显示隐藏，只需

 <Animate
           component=""
           showProp='data-show'
           transitionName="fade">
           <div data-show={this.state.enter} key="1" style={{
           display:this.state.enter?'block':'none',
           marginTop: '20px',
           width: '200px',
           height: '200px',
           backgroundColor: 'red'
           }}></div>
         </Animate>

那么当改变 enter 状态时，会自动根据 enter 的 true false 值，在 div 节点上加 fade-enter fade-enter-active 或 fade-leave fade-leave-active 样式名

#### remove element after css animation

也可以不设置 showProp 属性，那么就会根据元素有没有 children 进行 enter leave 的动画了

http://react-component.github.io/animate/examples/simple-remove.html

 <Animate
           component=""
           transitionName="fade">
           {this.state.enter?<div key="1" style={{
           display:this.state.enter?'block':'none',
           marginTop: '20px',
           width: '200px',
           height: '200px',
           backgroundColor: 'red'
           }}></div>:null}
         </Animate>

#### js animation for single element

http://react-component.github.io/animate/examples/simple-animation.html

可以设置 animation 对象为 js 函数来实现 js 动画

 <Animate
           component=""
           showProp='data-show'
           animation={{
             enter:this.animateEnter,
             leave:this.animateLeave
           }}>
           <div data-show={this.state.enter} key="1" style={{
           marginTop: '20px',
           width: '200px',
           height: '200px',
           backgroundColor: 'red'
           }}></div>
         </Animate>

js 函数定义如下

  animateEnter(node, done){
     $(node).css('display', 'none');
     $(node).slideDown(1000, done);
     return {
       stop: function () {
         $(node).stop(true, true);
       }
     };
   },

   animateLeave(node, done){
     $(node).css('display', '');
     $(node).slideUp(1000, done);
     return {
       stop: function () {
         $(node).stop(true, true);
       }
     };
   },

children animation

这时候 component 就不能留空了，可以不填，默认为 span 包裹 children，代码就不举例了，基本就是参考单个元素线性扩展到多元素

react-component animation demo using rc-animate

一些组件使用该模块进行的动画:

dialog: http://react-component.github.io/dialog/examples/ant-design.html

tabs: http://react-component.github.io/tabs/examples/ant-design.html

感想

终于折腾出一个比较满意的新组件了，现在写个组件竞争太激烈了….

另外博客再不写就长草了…