https://github.com/zeromake/preact-animate

fork by https://github.com/react-component/animate
https://github.com/zeromake/preact-animate

Last synced: 3 months ago
JSON representation

fork by https://github.com/react-component/animate

• Host: GitHub
• URL: https://github.com/zeromake/preact-animate
• Owner: zeromake
• License: mit
• Created: 2017-10-10T09:39:12.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-12T20:43:44.000Z (over 6 years ago)
• Last Synced: 2024-09-25T19:44:38.895Z (3 months ago)
• Language: TypeScript
• Size: 112 KB
• Stars: 7
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# preact-animate

---

animate preact or react element easily

## Feature

* support ie8,ie8+,chrome,firefox,safari

## install

`npm i preact-animate`

## Usage

### preact

```jsx

import Animate from 'preact-animate';

preact.render(

  

    
1

    
2

  

, mountNode);

```


### react

set webpack alias

``` javascript

module.exports = {

  resolve: {

    alias: {

      "preact-animate": "preact-animate/dist/react-animate.js"

    }

  }

}

```

or rollup alias

``` javascript

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:

```js

  {

    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](https://github.com/react-component/animate)