8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React 画面遷移をスライドアニメーションで表現する方法

Last updated at Posted at 2021-01-26

#はじめに
今回はReactで画面遷移時のスライドアニメーションの実装方法をまとめてみました。
Reactのライブラリを使用します。

#参考サイト
【The easiest way to slide React routes】
 - 画面遷移をスライドで表現する

ちなみにこちらのサイト、Reactを勉強してる方にオススメです。
機能ごとに検索できて、すごく分かりやすいです。
【React.js examples】
 - React勉強者オススメ

#実装準備
まず最初はreact-slide-routesreact-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-routesreact-router-domを使用することができます。

#実装方法
まずはスライドを適応させたいコンポーネントをBrowserRouterで挟んであげます。
インポートもお忘れなく。こちらはindex.js

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

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の三つの画面をスライド遷移させます。

App.js
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はスライドの秒数を指定することが出来ます。

App.js
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の画面遷移をスライドで表現する方法をご紹介いたしました。
画面遷移時にアニメーションがあるのと無いのでは使い心地が違いますよね。
最後まで読んでいただきありがとうございます。また新たな発見を発信したいと思います。

8
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?