Preact-animate NPM

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

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);
        }
      };
    }
  }