react router Transition

使用react-create-app

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link,Redirect,Switch } from "react-router-dom";

import { TransitionGroup, CSSTransition } from "react-transition-group";
import '../src/assets/sass/App.css';

const NavLink = (props) => {
  return(
    

      
    
  )
}

const HSL = ({match: {params}}) => {
  return(
    

    hsl({params.h}, {params.s}%, {params.l}%)
    
  )
}
const RGB = ({match: {params}}) => {
  return (
    

      rgb({params.r},{params.g},{params.b})
    
  )
}

class App extends Component {
  render() {
    return (
        
           (
            

              
https://reactcommunity.org/react-transition-group/
              
               }/> 
              

                Red
                Green
                Blue
                Pink
              

              

                
                  console.log('onEnter')}>
                    
                      
                      
                       
Not Found
} />
                    
                  
                
              
              
            
  
          )}/>
        
    );
  }
}

const styles = {};

styles.fill = {
  position: "absolute",
  left: 0,
  right: 0,
  top: 0,
  bottom: 0
};

styles.content = {
  ...styles.fill,
  top: "40px",
  textAlign: "center",
  width: '100%',
  overflowX: 'hidden',
};

styles.nav = {
  padding: 0,
  margin: 0,
  position: "absolute",
  top: 0,
  height: "40px",
  width: "100%",
  display: "flex"
};

styles.navItem = {
  textAlign: "center",
  flex: 1,
  listStyleType: "none",
  padding: "10px"
};

styles.hsl = {
  ...styles.fill,
  color: "white",
  paddingTop: "20px",
  fontSize: "30px"
};

styles.rgb = {
  ...styles.fill,
  color: "white",
  paddingTop: "20px",
  fontSize: "30px"
};


export default App;

App.css

.fade-enter {
    transform: translateX(-100%);
    z-index: 1;
}

.fade-enter.fade-enter-active {
    transform: translateX(0);
    transition: all 1s ease;
}

.fade-exit{
    transform: translateX(0);
}
.fade-exit.fade-exit-active{
    transform: translateX(100%);
    transition: all 1s ease;
}

效果

参考：

https://reacttraining.com/react-router/web/example/animated-transitions