https://github.com/kiki-le-singe/react-router-animation-examples

An example using React Router and React's Animations
https://github.com/kiki-le-singe/react-router-animation-examples

code-splitting react react-animate react-router reactjs redux webpack

Last synced: 2 months ago
JSON representation

An example using React Router and React's Animations

• Host: GitHub
• URL: https://github.com/kiki-le-singe/react-router-animation-examples
• Owner: kiki-le-singe
• License: mit
• Created: 2016-06-16T20:14:45.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-30T20:46:08.000Z (almost 8 years ago)
• Last Synced: 2024-09-29T01:21:48.181Z (3 months ago)
• Topics: code-splitting, react, react-animate, react-router, reactjs, redux, webpack
• Language: JavaScript
• Homepage: https://kiki-le-singe.github.io/react-router-animation-examples
• Size: 454 KB
• Stars: 77
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Router Animation Examples

## Introduction

This project is just an example using [`React Router`](https://github.com/reactjs/react-router) and [`React's Animations`](https://facebook.github.io/react/docs/animation.html) in a mobile context. So reduce your screen size.

In this example I only use `react-router` but in my opinion we can't only use the router to navigate from one screen to the other. Because obviously the route will change and you'll lose the previous displayed screen. This is not always the wanted effect in a mobile application. Maybe we could combine the router with the pushing and popping techniques like [`React Native`](https://facebook.github.io/react-native/)'s [`Navigation`](https://facebook.github.io/react-native/docs/navigation.html) or native mobile apps.

> Note: This example uses [react-redux-universal-boilerplate](https://github.com/kiki-le-singe/react-redux-universal-boilerplate)

## Requirements

 * [nodejs](http://nodejs.org/)

> Node `>=6.0.0`

## Optional

 * [yarn](https://yarnpkg.com/)

## Installation

```shell

$ git clone https://github.com/kiki-le-singe/react-router-animation-examples.git 

$ cd 

$ npm install or yarn

```

## Features

* [react](https://github.com/facebook/react)

* [react-router](https://github.com/reactjs/react-router)

* [Animation Add-Ons](https://facebook.github.io/react/docs/animation.html)

* [webpack 2](https://github.com/webpack/webpack)

* code splitting

## Sources

 * [React Animation](https://facebook.github.io/react/docs/animation.html)

 * [React Router](https://github.com/reactjs/react-router)

  * [React Router's examples animations](https://github.com/reactjs/react-router/tree/master/examples/animations)

  * [React Router's examples nested animations](https://github.com/reactjs/react-router/tree/master/examples/nested-animations)

## Learn more

 * [Using CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)