react頁面過渡動畫簡單實現

1. 在配置路由的外層父元素添加className

class App extends Component {
  render() {
    return (
      <div className='animate-route'>
        <Router>
          <Globalstyle />

          <Route exact path='/home' component={Home} />
          <Route exact path='/login' component={Login} />
        </Router>
      </div>
    );
  }
}

export default App;

 2. index.less文件添加以下代碼：

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

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