rc-css-transition-group

css-transition-group ui component for react

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
rc-css-transition-group
3892.1.48 years ago8 years agoMinified + gzip package size for rc-css-transition-group in KB

Readme

rc-css-transition-group

standalone and enhanced CSSTransitionGroup for React.addons.CSSTransitionGroup
!NPM versionnpm-imagenpm-url !build statustravis-imagetravis-url !Test coveragecoveralls-imagecoveralls-url !gemnasium depsgemnasium-imagegemnasium-url !node versionnode-imagenode-url !npm downloaddownload-imagedownload-url Sauce Test Status
Sauce Test Status

Screenshots

Feature

  • support ie8,ie8+,chrome,firefox,safari

install

rc-css-transition-group

Usage

var CSSTransitionGroup = require('rc-css-transition-group');
var React = require('react');
React.render(<CSSTransitionGroup><p>1</p><p>2</p></CSSTransitionGroup>, container);

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</td>
    </tr>
    <tr>
      <td><span style="color:red;">showProp</span></td>
      <td>String</td>
      <td></td>
      <td>using prop for show and hide. [demo](http://react-component.github.io/css-transition-group/build/examples/hide-todo.html) </td>
    </tr>
    <tr>
      <td><span style="color:red;">exclusive</span></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</td>
      <td></td>
      <td>transitionName, need to specify corresponding css</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>
</tbody>

http://facebook.github.io/react/docs/animation.html

Development

npm install
npm start

Example

http://localhost:8010/examples/index.md
online example: http://react-component.github.io/css-transition-group/build/examples/

Test Case

http://localhost:8010/tests/runner.html?coverage

Coverage

http://localhost:8010/nodemodules/rc-server/nodemodules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8010/tests/runner.html?coverage

License

rc-css-transition-group is released under the MIT license.