kiki-le-singe / react-router-animation-examples

An example using React Router and React's Animations

React Router Animation Examples

Introduction

This project is just an example using React Router and React's Animations 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's Navigation or native mobile apps.

Note: This example uses react-redux-universal-boilerplate

Requirements

• nodejs

Node >=6.0.0

Optional

• yarn

Installation

$ git clone https://github.com/kiki-le-singe/react-router-animation-examples.git <name>
$ cd <name>
$ npm install or yarn

Features

• react
• react-router
• Animation Add-Ons
• webpack 2
• code splitting

Sources

• React Animation
• React Router
• React Router's examples animations
• React Router's examples nested animations

Learn more

• Using CSS transitions

react-router-animation-examples's Issues

when i use Link of react-router , it causes the transition compoment to be copied

I clone your example and add some code , just use Link to route but not use this.props.router.push api. The reason is that I met a problem: when i change route in my own examples , the transition component has been copied. I have two identical component .

Could you help me? Thx!

remove useless styles

see https://reacttraining.com/react-router/