많은 단일 페이지 웹 응용 프로그램은 서로 다른 경로에 전환을 사용하지 않습니다.

React 전환은 그 변화를 희망합니다.

어떻게 작동합니까? 

https://github.com/joerez/react-transitions/ 

https://www.joerezendes.com/projects/react-transitions/ 

이 라이브러리는 React를 염두에 두고 만들어졌지만 실제로는 어떤 것이 든 작동하며 결국 CSS 애니메이션 라이브러리 일뿐입니다.

즉, Angular, VanillaJS와 함께 자유롭게 사용할 수 있습니다.

전환하려는 페이지에 클래스 이름을 추가하기만 하면 됩니다.

이 라이브러리와 다른 애니메이션 라이브러리의 큰 차이점은 이러한 전환이 전체 페이지를 전환하도록 설계되었다는 것입니다. 단일 요소가 아닙니다.

이 문서는 React Router에서 이러한 애니메이션을 사용하는 방법에 대한 자습서 역할을 합니다.

데모 페이지에는 각 전환에 대한 사용 사례가 표시되며 편리한 안내서 역할을 해야 합니다.

시작하기! 

여기에서 라이브러리를 다운로드하십시오

경로를 저장하는 컴포넌트 (일반적으로 App.js) 내에서 먼저 react-transitions.css 파일을 가져와야 합니다. 그런 다음 className을 사용하여 부모 div를 추가합니다. transition-container

파일은 다음과 같아야 합니다.

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

//this is the file that gives us our transitions
import './react-transitions.css';

import PageTwo from './PageTwo';

class App extends Component {
  render() {
    return (
        <BrowserRouter>
          //Don't forget our className
          <div className="transition-container">

            <Route exact to="/route" component={PageTwo}/>

          </div>
        </BrowserRouter>
    );
  }
}

export default App;
     

Looking Good 

다음으로 실제로 PageTwo 구성 요소 내에 전환을 추가합니다. 2 개의 class만 취합니다.

먼저 부모 div에 className:react-transition을 추가합니다.

우리가 사용하는 두 번째 className은 사용하려는 전환의 이름입니다. 그들 모두는 kabob 케이스입니다.

import React, { Component } from 'react';

class PageTwo extends Component {
  render() {
    return (
      <div className="react-transition swipe-down">
        Page Two
      </div>
    )
  }
}

export default PageTwo;

더 많은 className을 보려면 아래 목록을 사용하거나 DemoPage를 확인하십시오.

모든 애니메이션 클래스 

• swipe-up
• swipe-left
• swipe-right
• swipe-down
• fade-in
• scale-in
• scale-in-left
• scale-in-right
• drop-in
• drop-in-right
• drop-in-left
• flip-in-x
• flip-in-x-reverse
• flip-in-y
• flip-in-y-reverse
• rotate-in
• rotate-in-reverse
• woah
• blur-in
• white-wash-in
• black-wash-in

Custimization 

애니메이션 지속 시간을 변경할 수 있습니다. 인라인 스타일로 이 작업을 수행 할 수 있습니다.

class PageTwo extends Component {
  render() {
    return (
      <div className="react-transition swipe-down" style={{animationDuration: '2s'}}>
        Page Two
      </div>
    )
  }
}  

팁과 요령 

body 요소의 배경 속성을 대부분의 구성 요소와 동일한 색상으로 설정하는 데 도움이 됩니다. 확실하지 않은 경우 흰색 또는 검은 색으로 유지하십시오.