https://github.com/misterfresh/react-easy-transition

Easy transitions with react and react-router
https://github.com/misterfresh/react-easy-transition

Last synced: 11 days ago
JSON representation

Easy transitions with react and react-router

• Host: GitHub
• URL: https://github.com/misterfresh/react-easy-transition
• Owner: misterfresh
• License: mit
• Created: 2016-03-08T11:28:19.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-22T11:32:41.000Z (about 6 years ago)
• Last Synced: 2024-10-29T00:51:29.749Z (16 days ago)
• Language: JavaScript
• Size: 3.65 MB
• Stars: 143
• Watchers: 3
• Forks: 20
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Easy Transition

```

npm install react-easy-transition --save

```

Easy transitions in react and react-router

## Usage

For a simple fade-out fade-in effect on route change with react-router :

```jsx

import EasyTransition from 'react-easy-transition'

    {this.props.children}

```

Multiple transitions on different properties:

```jsx

    {this.props.children}

```

Optionally set a leaveStyle if it is different than the initialStyle:

```jsx

    {this.props.children}

```

You can set a custom component or classname if needed

```jsx

    {this.props.children}

```

**NOTE**: If your `` component (or any children of this) contains styling/classes that use `transition`, make sure **not** to use `transition: all` as this will prevent react-easy-transition from fading out.

## Live Demo

[Live Demo here](https://react-easy-transition.herokuapp.com/)

## Features

* Small : only 70 lines of code

* Lightweight : based on ReactTransitionGroup low level API

* Easy: works out of the box with React Router 2.0, no need to define CSS classes, use Javascript objects to define transition styles.

* Performance : still using native browser CSS transition under the hood

* Flexible : support for multiple transitions

## This module solves the following issues:

* The fade-in effect when component mounts is rather straightforward to do with pure CSS transitions. However, the fade-out effect is impossible to do using only CSS because the component disappears immediately when unmounted.

* The new component appears before the end of the fade-out transition of the previous component, so both are shown at the same time, one on top of the other.

* Transition on initial render when rendering on the server

## Example

* Integration with react-router, redux, and server-side rendering in ./demo/