rc-animate

What is rc-animate?

The rc-animate package is a React component for creating animations. It provides a simple way to animate elements as they enter and leave the DOM, making it useful for creating dynamic and interactive user interfaces.

What are rc-animate's main functionalities?

Basic Animation

This example demonstrates a basic animation using rc-animate. When the button is clicked, the 'Hello World' box will fade in and out.

const React = require('react');
const ReactDOM = require('react-dom');
const Animate = require('rc-animate');

class App extends React.Component {
  state = { show: true };

  toggle = () => {
    this.setState({ show: !this.state.show });
  };

  render() {
    return (
      <div>
        <button onClick={this.toggle}>Toggle</button>
        <Animate transitionName="fade">
          {this.state.show ? <div key="1" className="box">Hello World</div> : null}
        </Animate>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Custom Animation

This example shows how to use custom CSS classes for animations. The 'custom-enter' and 'custom-leave' classes can be defined in your CSS to create custom animations.

const React = require('react');
const ReactDOM = require('react-dom');
const Animate = require('rc-animate');

class App extends React.Component {
  state = { show: true };

  toggle = () => {
    this.setState({ show: !this.state.show });
  };

  render() {
    return (
      <div>
        <button onClick={this.toggle}>Toggle</button>
        <Animate
          transitionName={{
            enter: 'custom-enter',
            leave: 'custom-leave'
          }}
        >
          {this.state.show ? <div key="1" className="box">Hello World</div> : null}
        </Animate>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Other packages similar to rc-animate

react-transition-group

react-transition-group is a popular package for managing animations in React. It provides more control over the animation lifecycle and is more flexible compared to rc-animate. It supports more complex animations and transitions.

framer-motion

framer-motion is a powerful animation library for React. It offers a wide range of animation capabilities, including gestures, keyframes, and layout animations. It is more feature-rich and modern compared to rc-animate.

react-spring

react-spring is a spring-physics-based animation library for React. It provides a more natural and fluid animation experience. It is highly customizable and can handle complex animation scenarios better than rc-animate.

README

rc-animate

---

animate react element easily

Feature

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

install

Usage

import Animate from 'rc-animate';

ReactDOM.render(
  <Animate animation={{ ... }}>
    <p key="1">1</p>
    <p key="2">2</p>
  </Animate>
, mountNode);

CSSMotion

props

Property	Type	Default	Description
visible	boolean	true	Display child content or not
children	function		Render props of children content. Example [see below](#sample usage)
motionName	string | motionNameObjProps		Set the className when motion start
motionAppear	boolean	true	Support motion on appear
motionEnter	boolean	true	Support motion on enter
motionLeave	boolean	true	Support motion on leave
onAppearStart	function		Trigger when appear start
onAppearActive	function		Trigger when appear active
onAppearEnd	function		Trigger when appear end
onEnterStart	function		Trigger when enter start
onEnterActive	function		Trigger when enter active
onEnterEnd	function		Trigger when enter end
onLeaveStart	function		Trigger when leave start
onLeaveActive	function		Trigger when leave active
onLeaveEnd	function		Trigger when leave end

motionNameObjProps

Property	Type
appear	string
appearActive	string
enter	string
enterActive	string
leave	string
leaveActive	string

sample usage

// Return customize style
const onAppearStart = (ele) => ({ height: 0 });

<CSSMotion
  visible={show}
  transitionName="transition"
  onAppearStart={onAppearStart}
>
  {({ style, className }) => (
    <div className={className} style={style} />
  )}
</CSSMotion>

Animate (Deprecated)

props

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