Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/maisano/react-router-transition below:

maisano/react-router-transition: painless transitions built for react-router, powered by react-motion

Painless transitions for React Router, powered by React Motion. Example site.

To use the latest version of this package (2.x), you'll need to use a version of React compatible with hooks, as well as version 5.x of react-router-dom.

npm install --save react-router-transition react-router-dom

import { BrowserRouter as Router, Route } from 'react-router-dom';
import { AnimatedSwitch } from 'react-router-transition';

export default () => (
  <Router>
    <AnimatedSwitch
      atEnter={{ opacity: 0 }}
      atLeave={{ opacity: 0 }}
      atActive={{ opacity: 1 }}
      className="switch-wrapper"
    >
      <Route exact path="/" component={Home} />
      <Route path="/about/" component={About}/>
      <Route path="/etc/" component={Etc}/>
    </AnimatedSwitch>
  </Router>
)

.switch-wrapper {
  position: relative;
}

.switch-wrapper > div {
  position: absolute;
}

• AnimatedSwitch
• AnimatedRoute

This library has some obvious limitations, the most marked of which are:

• no staggering or sequencing of animations
• no durations or timing functions

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4