집 > 기사 > 웹 프론트엔드 > 반응에서 페이지 전환 효과를 얻는 방법

반응에서 페이지 전환 효과를 얻는 방법

不言원래의: 2018-08-14 15:38:314481검색

이 글의 내용은 React에서 페이지 전환 효과를 얻는 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 이전 상황 개요

참고: (제가 사용하는 경로는 React-router4입니다.)
아래 그림과 같이 페이지 전환 시 전환 효과가 있어야 페이지 전환이 나타나지 않습니다. 뻣뻣하고 사용자 경험이 크게 향상되었습니다.
반응에서 페이지 전환 효과를 얻는 방법
그러나 문제는 반응의 라우팅 애니메이션이 vue만큼 편리하지 않다는 것입니다. 단지 vue에 몇 가지 스타일을 작성하면 완료됩니다.
그래서 온라인에서 찾아봤는데, React-addons-css-transition-group 등과 같은 다음 방법은 플러그인 설치, 라우팅 구조 변경, vuex 수행, 애니메이션 진입 시점 결정이 필요합니다... .
두 가지 방법을 시도해 봤는데 왜 안되는지 모르겠네요... 어느새 가을이 오고 찬바람이 불고 있는데 뷰가 생각나네요...

2. 우여곡절

이때 기사에서 플러그인을 발견했습니다:

링크: 페이지 라우팅 전환을 위해 반응 라우터 v4 및 반응 전환 그룹을 사용 애니메이션 효과

이것은 애니메이션 전환 부모 구성 요소의 버그를 해결한 후 저자가 캡슐화한 것입니다
그래서 시도해 볼 계획입니다

3. Qiankun Yi throw

사용이 매우 간단하며 두 단계로 나뉩니다
1. 설치:

  npm install react-animated-router --save

2. 프로젝트에서 사용:

   import AnimatedRouter from 'react-animated-router'; //我们的AnimatedRouter组件
   import 'react-animated-router/animate.css'; //引入默认的动画样式定义

그런 다음 라우팅 구성 요소를 추가합니다. 스위치는 AnimatedRouter로 교체할 수 있습니다.
구성 요소 작성자의 기사에 따라 이 두 단계를 완료한 후 오류가 보고되었습니다.
반응에서 페이지 전환 효과를 얻는 방법

4. Breaking the boat

우여곡절은 긴 이야기였고, 결국에는 아직 더 많은 것이 있다는 것을 깨달았습니다. 또한 두 개의 플러그인을 설치하십시오:

    npm install react-transition-group@2.3.0 --save
   npm install –save-dev prop-types

그런 다음 페이지. 오류 보고 없이 정상적으로 실행될 수 있으며, 컴포넌트 작성자 덕분에 페이지 전환 효과도 가능합니다.
애니메이션 전환을 위한 스타일 파일이 node_modulesreact-animated-routeranimate.css에 추가되어야 합니다. 여기에서 직접 할 수 있습니다. 필요에 따라 애니메이션 효과를 수정하십시오.
아니면 복사해서 수정하고 다시 인용하는 것이 좋을 수도 있습니다.

반응에서 페이지 전환 효과를 얻는 방법

1. 이전 상황 개요

2. 우여곡절

3. Qiankun Yi throw

4. Breaking the boat

관련 기사