Socket
Socket
Sign inDemoInstall

rc-animate

Package Overview
Dependencies
13
Maintainers
5
Versions
68
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-animate

css-transition ui component for react


Version published
Maintainers
5
Weekly downloads
580,233
decreased by-8.98%

Weekly downloads

Readme

Source

rc-animate


Animate React Component easily.

NPM version build status Test coverage Dependencies DevDependencies npm download bundle size

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, Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versions

API

props

nametypedefaultdescription
componentReact.Element/String'span'wrap dom node or component for children. set to '' if you do not wrap for only one child
componentPropsObject{}extra props that will be passed to component
showPropStringusing prop for show and hide. [demo](http://react-component.github.io/animate/examples/hide-todo.html)
exclusiveBooleanwhether allow only one set of animations(enter and leave) at the same time.
transitionNameString|Objectspecify corresponding css, see ReactCSSTransitionGroup
transitionAppearBooleanfalsewhether support transition appear anim
transitionEnterBooleantruewhether support transition enter anim
transitionLeaveBooleantruewhether support transition leave anim
onEndfunction(key:String, exists:Boolean)trueanimation end callback
animationObject{} to animate with js. see animation format below.

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.

Keywords

FAQs

Last updated on 25 Sep 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc