react-router와 react-addons-css-transition-group을 사용한 페이지 전환

최근에 React.js를 배우기 시작했는데 이제는 애니메이션/전환으로 놀려고합니다. React Router을 사용 중이고 ReactCSSTransitionGroup이있는 페이지간에 매우 간단한 전환을 구현하려고합니다. 그것은 페이지를로드/새로 고침 할 때 작동하지만 페이지에서 물마루 탐색 링크로 이동할 때 작동하지 않습니다. 페이지를 다음 코드로 페이드 만들기 위해 시도했지만 작동하지 않습니다react-router와 react-addons-css-transition-group을 사용한 페이지 전환

package.json

{ 
    "name": "reactapp", 
    "version": "1.0.0", 
    "description": "", 
    "main": "main.js", 
    "dependencies": { 
    "babel-core": "^6.9.1", 
    "babel-preset-react": "^6.5.0", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "react": "^15.1.0", 
    "react-dom": "^15.1.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "devDependencies": {}, 
    "scripts": { 
    "start": "webpack-dev-server --inline --content-base . --history-api-fallback" 
    }, 
    "author": "", 
    "license": "ISC" 
}

index.html을

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>React App</title> 
     <link rel="stylesheet" href="/app.css"> 
    </head> 
    <body> 
     <div id="app"></div> 
     <script src="/index.js"></script> 
    </body> 
</html>

하는 index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router' 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 

class App extends React.Component { 
    render() { 
     return (
     <div> 
      <ul> 
       <Link to="/home">Home</Link> 
       <Link to="/about">About</Link> 
       <Link to="/contact">Contact</Link> 
      </ul> 
      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}> 
        {this.props.children} 
      </ReactCSSTransitionGroup> 

     </div> 
    ) 
    } 
} 

export default App; 

class Home extends React.Component { 
    render() { 
     return (
     <div> 
      <h1>Home...</h1> 
     </div> 
    ) 
    } 
} 

export default Home; 

class About extends React.Component { 
    render() { 
     return (
     <div> 
      <h1>About...</h1> 
     </div> 
    ) 
    } 
} 

export default About; 

class Contact extends React.Component { 
    render() { 
     return (
     <div> 
      <h1>Contact...</h1> 
     </div> 
    ) 
    } 
} 

export default Contact; 

ReactDOM.render((
    <Router history={browserHistory}> 
     <Route path = "/" component = {App}> 
     <IndexRoute component = {Home} /> 
     <Route path = "home" component = {Home} /> 
     <Route path = "about" component = {About} /> 
     <Route path = "contact" component = {Contact} /> 
     </Route> 
    </Router> 

), document.getElementById('app'))

는

.example-appear { 
    opacity: 0.01; 
} 

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

모든 아이디어를 어떻게이 일을하는 방법을 app.css?

감사합니다.

출처

2016-06-23 Plavookac

'transitionEnterTimeout' /'transitionLeaveTimeout'은 어디에 있습니까? 'transitionAppearTimeout'을 설정했는데 css가 아니라'enter' /'leave' CSS를 설정했지만 시간 초과를 설정하지 않았습니다. – Kujira

와우 .. 나는 그것을 놓쳤다. 지적 해 주셔서 고맙습니다, 제 질문을 수정할 것입니다. 페이딩은 페이지에서 페이지 트레버 내비게이션으로 진행할 때 작동하지 않습니다.로드/새로 고침시에만 – Plavookac

'enter'및 'leave'타임 아웃/CSS를 넣었습니까? 'appear' 만 설정했기 때문에'ReactCSSTransitionGroup'이로드 될 때만 발생합니다; 새롭게 하다. – Kujira

https://github.com/reactjs/react-router/blob/master/examples/animations/app.js

대신 단지 렌더링 this.props.children, 당신은 구성 요소를 복제 소품으로 그것을 아이들을 통과해야합니다. 그런 다음 React-router는 탐색을 위해 키를 사용합니다.

<ReactCSSTransitionGroup 
    transitionName="example" 
    transitionAppear={true} 
    transitionAppearTimeout={500} 
> 
    {React.cloneElement(this.props.children, { key: this.props.location.pathname })} 
</ReactCSSTransitionGroup>

출처

2016-06-24 12:25:28

이제 이상한 일이 일어납니다. http://screencast.com/t/ffjBz31Q 나는 집에서부터 연락을하고 연락을하고 ... 모든 제목을 아래에 나열하고 있습니다 .. – Plavookac

코덱을 만들 수 있습니까? (codepen.io) –

react-router와 react-addons-css-transition-group을 사용한 페이지 전환

답변

관련 문제