Page switching CSS3 animation effects

 

React with the development page, fast page switching time, the feeling is not very good, a lot of online search and found this simple and convenient, the effect can be, the record about

Add className = 'animate-route' on the parent component

class Admin extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <div className='animate-route'>
                <GlobalStyle />
                <Header />
                <Content>{this.props.children}</Content>
                <Footer />
            </div>
        );
    }
}
export default Admin;

 CSS add the following code

.animate-route {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeRoute;
}

@keyframes fadeRoute {
    from {
        opacity: 0;
    }
    to {
      opacity: 1;
    }
}

　　Refresh the page to see the ......