preact-animate

---

animate preact or react element easily

Feature

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

install

npm i preact-animate

Usage

preact

import Animate from 'preact-animate';
 
preact.render(
  <Animate animation={{ ... }}>
    <p key="1">1</p>
    <p key="2">2</p>
  </Animate>
, mountNode);

react

set webpack alias

module.exports = {
  resolve: {
    alias: {
      "preact-animate": "preact-animate/dist/react-animate.js"
    }
  }
}

or rollup alias

const alias = require('rollup-plugin-alias')
module.exports = {
  plugins: [new alias({
    'preact-animate': 'preact-animate/dist/react-animate.js'
  })]
}

API

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
onBeforeEnter	function(child: AnimateChild) => void;	null	animation before Enter life
onEnter	function(child: AnimateChild, done: () => void) => void;	null	animation Enter life must called `done`
onAfterEnter	function(child: AnimateChild) => void;	null	animation after Enter life
onBeforeLeave	function(child: AnimateChild) => void;	null	animation before Leave life
onLeave	function(child: AnimateChild, done: () => void) => void;	null	animation Leave life must called `done`
onAfterLeave	function(child: AnimateChild) => void;	null	animation after Leave life
onBeforeAppear	function(child: AnimateChild) => void;	null	animation before appear life
onAppear	function(child: AnimateChild, done: () => void) => void;	null	animation Appear life must called `done`
onAfterAppear	function(child: AnimateChild) => void;	null	animation after Appear life
onBeforeDisappear	function(child: AnimateChild) => void;	null	animation before Disappear life
onDisappear	function(child: AnimateChild, done: () => void) => void;	null	animation Disappear life must called `done`
onAfterDisappear	function(child: AnimateChild) => void;	null	animation after Disappear life
onAfterCancelled	function(child: AnimateChild, status: number) => any	null	animation after cancelled life
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);
        }
      };
    }
  }

License

preact-animate is released under the MIT license.

Thank

fork by rc-animate