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

이 글의 내용은 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에 추가되어야 합니다. 여기에서 직접 할 수 있습니다. 필요에 따라 애니메이션 효과를 수정하십시오.
아니면 복사해서 수정하고 다시 인용하는 것이 좋을 수도 있습니다.

추천 관련 기사:

React-Native+Mobx는 쇼핑몰 APP를 구현합니다.

React Native는 인증 코드 카운트다운 기능을 구현합니다

액티비티 전환 애니메이션 및 페이지 전환 Animation_html/css_WEB-ITnose

HTML5 단일 페이지 제스처 슬라이딩 화면 전환 구현 방법

위 내용은 반응에서 페이지 전환 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!