react, redux 및 react-router-redux를 사용하여 다른 페이지로 라우팅하기 전의 애니메이션

Question

나는 프론트 엔드에 내장되어 있으며 탐색을 위해 react, redux 및 react-router-redux를 사용하는 앱에서 작업하고 있으며, 프론트 엔드 expirience. 한 페이지에서 다른 페이지로 라우팅을 수행해야하는 경우 먼저 애니메이션을 표시해야하고 애니메이션이 끝나면 다른 페이지로 이동해야합니다. 애니메이션 클래스를 추가 할 하나의 액션을 실행하려고 생각했습니다. 액션이 끝나면 setTimeout과 비슷한 것을 사용하여 애니메이션이 끝나면 push-action이 react-router-redux에서 시작됩니다. 문제를 해결하는 다른 방법은 무엇입니까?

Answer 1

당신은 react-addons-css-transition-group

ReactCSSTransitionGroup이 ReactTransitionGroup을 기반으로 사용하고 구성 요소가 들어가거나 DOM 잎 반작용 때 CSS 전환 및 애니메이션을 수행 할 쉬운 방법입니다 수 있습니다. 우수한 ng-animate 라이브러리에서 영감을 얻었습니다.

이 메인 레이아웃에서 당신이 경로를

CSS

.example-enter { 
    opacity: 0.01; 
    transition: opacity .5s ease-in; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
} 

.example-leave { 
    opacity: 1; 
    transition: opacity .5s ease-in; 
} 

.example-leave.example-leave-active { 
    opacity: 0; 
} 

JS를 변경할 때마다 전환을 트리거 할

import React from 'react' 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group' 

const App = ({ children, location }) => (
    <div> 
    <ul> 
     <li><Link to="/page1">Page 1</Link></li> 
     <li><Link to="/page2">Page 2</Link></li> 
    </ul> 

    <ReactCSSTransitionGroup 
     component="div" 
     transitionName="example" 
     transitionEnterTimeout={500} 
     transitionLeaveTimeout={500} 
    > 
     {React.cloneElement(children, { 
     key: location.pathname 
     })} 
    </ReactCSSTransitionGroup> 
    </div> 
) 

Full example