https://github.com/haha54carol/react-animations

Easiest way to use animation in your Rect projects.
https://github.com/haha54carol/react-animations

library react-animations reactjs

Last synced: about 2 months ago
JSON representation

Easiest way to use animation in your Rect projects.

• Host: GitHub
• URL: https://github.com/haha54carol/react-animations
• Owner: haha54carol
• Created: 2018-08-15T10:26:27.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-15T16:04:17.000Z (over 6 years ago)
• Last Synced: 2025-03-26T05:03:07.144Z (about 2 months ago)
• Topics: library, react-animations, reactjs
• Language: CSS
• Homepage: https://haha54carol.github.io/react-animations/
• Size: 1.2 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# simple-react-animations

[![npm version](https://badge.fury.io/js/react-animations.svg)](https://badge.fury.io/js/react-animations)

> Easiest way to use animation in your React projects.

## Demo

https://haha54carol.github.io/react-animations/

![image](https://github.com/haha54carol/react-animations/blob/master/simple-react-animations.gif)

## How to Use?

### Installation

```javascript

# npm 

npm install simple-react-animations

# yarn

yarn add simple-react-animtaions

```

### Import

```javascript

import Animation from 'simple-react-animations'

```

### Wrap your component

``` javascript

    {children}

```

#### Arguments

```1. act ( string | required )```

Support 7 types of animation right now!

    * topIn

    * bottomIn

    * leftIn

    * rightIn

    * topInBottomOut

    * zoomIn

    * fade

    

```2. in ( boolean | optional | default = true)```

When the **in** prop is toggled to **true** the Component will get the **example-enter** CSS class and the **example-enter-active** CSS class added in the next tick. 

### Example 

``` javascript

import React, { Component } from 'react'

import Animation from 'simple-react-animations'

class Example extends Component {

  render() {

    return (

        

            
your component

              

    )

  }

}


export default Example

```