#はじめに
今回はReactで画面遷移時のスライドアニメーションの実装方法をまとめてみました。
Reactのライブラリを使用します。
#参考サイト
【The easiest way to slide React routes】
- 画面遷移をスライドで表現する
ちなみにこちらのサイト、Reactを勉強してる方にオススメです。
機能ごとに検索できて、すごく分かりやすいです。
【React.js examples】
- React勉強者オススメ
#実装準備
まず最初はreact-slide-routes
とreact-router-dom
をインポートします。
npm info react-slide-routes
npm info react-router-dom
現在の最新バージョンを確認して、そのバージョンをyarn add
します。
yarn add react-slide-routes@0.14.0
yarn add react-router-dom@5.2.0
これでreact-slide-routes
とreact-router-dom
を使用することができます。
#実装方法
まずはスライドを適応させたいコンポーネントをBrowserRouter
で挟んであげます。
インポートもお忘れなく。こちらはindex.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
そして今回使用するのは、SlideRoutes, Route, NavLink, useLocation
なので、これらをまずインポートします。こちらはApp.js
import React from 'react';
import SlideRoutes from 'react-slide-routes';
import { Route, NavLink, useLocation } from 'react-router-dom';
今回は必要最低限のcssでご紹介します。
参考サイトのコードにはもっと整ったcssが載っていますのでご参考ください。
コンポーネントも別ファイルに作らずApp.js
に作っています。
Home,About,Contactの三つの画面をスライド遷移させます。
const Home = () => <div style={styles.home}>Home</div>;
const About = () => <div style={styles.about}>About</div>;
const Contact = () => <div style={styles.contact}>Contact</div>;
const styles = {
home: {
color: '#fff',
fontSize: '64px',
background: 'rgba(255, 100, 0)',
},
about: {
color: '#fff',
fontSize: '64px',
background: 'rgba(0, 150, 255)',
},
contact: {
color: '#fff',
fontSize: '64px',
background: 'rgba(44, 219, 88)',
},
}
そしてこちらがスライド機能の部分です。
useLocation
でページのURLのpath情報を読み取り、
duration
はスライドの秒数を指定することが出来ます。
const App = () => {
const location = useLocation();
return (
<>
<nav>
<NavLink to="/" exact>Home</NavLink>
<NavLink to="/about">About</NavLink>
<NavLink to="/contact">Contact</NavLink>
</nav>
<SlideRoutes location={location} duration={500}>
<Route path="/" component={Home} exact />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</SlideRoutes>
</>
);
};
export default App;
#終わりに
今回はReactの画面遷移をスライドで表現する方法をご紹介いたしました。
画面遷移時にアニメーションがあるのと無いのでは使い心地が違いますよね。
最後まで読んでいただきありがとうございます。また新たな発見を発信したいと思います。