CSS3页面切换动画效果

 

用的react开发页面，页面切换的时候太快了，感觉效果不是很好，网上搜索了很多，发现这个简单方便，效果也还可以，记录一下

在父组件上添加 className=‘animate-route’

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添加如下代码

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

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

　　刷新网页看看把......