rc-animate

css-transition ui component for react

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
rc-animate
3.1.13 years ago9 years agoMinified + gzip package size for rc-animate in KB

Readme

rc-animate

Animate React Component easily.
!NPM versionnpm-imagenpm-url !build statustravis-imagetravis-url !Test coveragecoveralls-imagecoveralls-url !Dependenciesdavid-imagedavid-url !DevDependenciesdavid-dev-imagedavid-dev-url !npm downloaddownload-imagedownload-url !bundle sizebundlephobia-imagebundlephobia-url

Install

rc-animate

Usage

import Animate from 'rc-animate';

export default () => (
  <Animate animation={{ ... }}>
    <p key="1">1</p>
    <p key="2">2</p>
  </Animate>
);

Compatibility

| IE / Edge
IE / Edge | Firefox
Firefox | Chrome
Chrome | Safari
Safari | Electron
Electron | | --- | --- | --- | --- | --- | | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

API

props

<thead>
<tr>
    <th style="width: 100px;">name</th>
    <th style="width: 50px;">type</th>
    <th style="width: 50px;">default</th>
    <th>description</th>
</tr>
</thead>
<tbody>
    <tr>
      <td>component</td>
      <td>React.Element/String</td>
      <td>'span'</td>
      <td>wrap dom node or component for children. set to '' if you do not wrap for only one child</td>
    </tr>
    <tr>
      <td>componentProps</td>
      <td>Object</td>
      <td>{}</td>
      <td>extra props that will be passed to component</td>
    </tr>
    <tr>
      <td>showProp</td>
      <td>String</td>
      <td></td>
      <td>using prop for show and hide. [demo](http://react-component.github.io/animate/examples/hide-todo.html) </td>
    </tr>
    <tr>
      <td>exclusive</td>
      <td>Boolean</td>
      <td></td>
      <td>whether allow only one set of animations(enter and leave) at the same time. </td>
    </tr>
    <tr>
      <td>transitionName</td>
      <td>String|Object</td>
      <td></td>
      <td>specify corresponding css, see ReactCSSTransitionGroup</td>
    </tr>
   <tr>
     <td>transitionAppear</td>
     <td>Boolean</td>
     <td>false</td>
     <td>whether support transition appear anim</td>
   </tr>
    <tr>
      <td>transitionEnter</td>
      <td>Boolean</td>
      <td>true</td>
      <td>whether support transition enter anim</td>
    </tr>
   <tr>
     <td>transitionLeave</td>
     <td>Boolean</td>
     <td>true</td>
     <td>whether support transition leave anim</td>
   </tr>
   <tr>
     <td>onEnd</td>
     <td>function(key:String, exists:Boolean)</td>
     <td>true</td>
     <td>animation end callback</td>
   </tr>
    <tr>
      <td>animation</td>
      <td>Object</td>
      <td>{}</td>
      <td>
        to animate with js. see animation format below.
      </td>
    </tr>
</tbody>

animation format

with appear, enter and leave as keys. for example:
{
  appear: function(node, done){
    node.style.display='none';
    $(node).slideUp(done);
    return {
      stop:function(){
        // jq will call done on finish
        $(node).stop(true);
      }
    };
  },
  enter: function(){
    this.appear.apply(this,arguments);
  },
  leave: function(node, done){
    node.style.display='';
    $(node).slideDown(done);
    return {
      stop:function(){
        // jq will call done on finish
        $(node).stop(true);
      }
    };              
  }
}

Development

npm install
npm start

Example

http://localhost:8200/examples/index.md
online example: http://react-component.github.io/animate/examples/

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-animate is released under the MIT license.