[React] ReactJS 페이지 전환 애니메이션 #react-transition-group

설치

$npm install react-transition-group --save

 

사용법

react-router와 같이 사용했다.

 

App.js

import React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import Routers from "./Routers";

class App extends Component {
  render() {
    return (
      <Router>
        <Routers/>
      </Router>
    );
  }
}

export default App;

BrowserRouter로 쓰면 주소창에서 직접 페이지로 접속이 안됐는데 따로 빼서 사용하니까 직접 접속이 된다. (아직 더 알아봐야 함.)

라우터를 이렇게 설정하고 다음으로 넘어가자.

 

Routers.js

import React from "react";
import { Switch, Route, withRouter } from "react-router-dom";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import Home from "../Pages/Home";
import Login from "../Pages/Login";

function Routers({ location }) {
  return (
    <TransitionGroup className="transition-group">
      <CSSTransition
        key={location.key}
        timeout={{ enter: 300, exit: 300 }}
        classNames="fade"
      >
        <section className="route-section">
          <Switch location={location}>
            <Route
              exact
              path={process.env.PUBLIC_URL + "/"}
              component={Home}
            />
            <Route path="/signup" component={Login} />
          </Switch>
        </section>
      </CSSTransition>
    </TransitionGroup>
  );
}
export default withRouter(Routers);

function Fouters({ location }) 여기서 location을 가져오려고 App에서 Router를 따로 뺏다. 안 빼고 쓰는 법을 못 찾음.

TransitionGroup과 CSSTransition을 사용했다. TransitionGroup으로 묶어주고 CSSTransition에 key를 줘서 각각 동작하게 하는 듯?

 

CSS

.fade-enter {
  opacity: 0.01;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit.fade-exit-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

div.transition-group {
  position: relative;
}

section.route-section {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

CSS를 따라 안 하면 이전 페이지가 안 없어지고 아래에 있다가 사라지는 것을 볼 수 있다.

여기서 몇 가지 수정하면 다른 애니메이션을 구현할 수 있을 것이다. 지금은 fade-in, out으로 구현됨.

 

분명 여러 가지 시행착오 끝에 알아낸 건데 뭔가 설명할만한 것이 없다.