Wondering what’s next for npm?Check out our public roadmap! »

preact-animate

3.0.5 • Public • Published

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

Install

npm i preact-animate

DownloadsWeekly Downloads

58

Version

3.0.5

License

MIT

Unpacked Size

852 kB

Total Files

31

Last publish

Collaborators

  • avatar