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;
    }
}

　　刷新網頁看看把......