https://github.com/platane/react-propstransition

allows component to transition from a state to another
https://github.com/platane/react-propstransition

animation react transition

Last synced: about 1 month ago
JSON representation

allows component to transition from a state to another

• Host: GitHub
• URL: https://github.com/platane/react-propstransition
• Owner: Platane
• Created: 2017-01-04T10:05:29.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-11T09:09:07.000Z (about 7 years ago)
• Last Synced: 2024-10-05T16:43:27.940Z (about 2 months ago)
• Topics: animation, react, transition
• Language: JavaScript
• Size: 78.1 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
react-propsTransition

===

[![wercker status](https://app.wercker.com/status/390b3b425f0799a5084092760048901a/s/master "wercker status")](https://app.wercker.com/project/byKey/390b3b425f0799a5084092760048901a)

[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

[![npm](https://img.shields.io/npm/v/react-propstransition.svg)](https://www.npmjs.com/package/react-propstransition)

Declare a property to transition. Whenever this props change, the component render is called with ( previous, next ) so you can hook whatever animation.

```

  Flow diagram :

    k = 'a'             k change to 'b'

                             |

                             |<------------delay---------------->|

    . . . -------------------|-----------------------------------|---------------------->

        next     : a         |       next     : b                |   next     : b

        previous : null              previous : a                    previous : null

        transition : false           transition : true               transition : false

```

# Usage

```javascript

import {Transition} from 'react-propsTransition'

const Component = ({ value }) =>

  

    {

      ({ next, previous, transition }) =>

        {

          transition

            ? `The value was ${previous}, it will be ${next}`

            : `The value is ${next}`

        }

    }

  

```

## Options

- _toTransition_    the value to transition, can be a primitive or an object

- _delay_           delay of the transition, in ms 

- _equal_           check for value change, ( default is == )

## IndirectTransition

The indirect transition have the same api, but transition only from a value to null and from null to a value.

When the direct transition goes A -> B, the indirect goes A -> null -> B ( with A != null and B != null )

```

  Flow diagram :

  k = 'a'             k change to 'b'

                               |

                               |<------------delay---------------->|<------------delay---------------->|

      . . . -------------------|-----------------------------------|-----------------------------------|-------------------------->

          next     : a         |       next     : null             |        next     : b               |      next     : b

          previous : null              previous : a                         previous : null                   previous : null

  

         transition : false            transition : true                    transition : true                 transition : false

  

                                       indirectNext: b                      indirectNext: null

                                       transitionIndirect: true             transitionIndirect: false

```

# Example

Animate the fadeIn, fadeOff of a drawer

```javascript

const Drawer = ({ opened }) =>

  

    {

      ({ next, previous, transition }) =>

        (next || previous) &&

          


            

          

    }

  


```