ReactCSSTranscriptionGroup 및 React Router를 통해 복잡한 애니메이션이 가능하십니까?

ReactCSSTranscriptionGroup 및 React Router를 통해 복잡한 애니메이션이 가능하십니까?

ReactCSSTransitionGroup이 내 사용 사례에 적합한지 아닌지 궁금하다.

한 경로에서 사용자가 검색 버튼을 클릭하면 검색 페이지에 로드되는 동안 버튼이 다른 방향으로 전환되어야 한다.한 번 로드되면 페이지의 일부 영역이 측면에서 애니메이션으로 표시된다.

전체 페이지 전환이 간단해 보이도록 Ractive Router와 함께 이것을 사용하고 있지만 이러한 방식으로 특정 요소를 애니메이션화하는 것이 더 어려워 보인다.

ReactCSSTranscriptionGroup이 이 문제를 처리할 수 있어야 하는가? 아니면 다른 대안을 찾아야 하는가?

내 생각에 대답은 "그래, 가능해"이다.

나는 코드펜에 대한 개념 증명을 썼다.와 사귀는 사람이 몇 명 있다.ReactCSSTransitionGroup그 중 하나는 구글 그룹에 관한 이번 토론에서 언급되었다.거기서 누군가가 다음과 같이 말한다.

ReactCSSTranscriptionGroup을 유지하고 컨텐츠를 추가/제거하십시오.

그래서 기본적으로 아이들에게 활기를 불어넣어 줄 구성 요소가 있다면, 아이들을 안으로 감싸야 한다.ReactCSSTransitionGroup여기 내 펜에 근거한 유사문자가 있다.

라우터 설정이 다음과 같다고 가정해 봅시다.

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/repos" component={Repos}>
      <Route path="/repos/:userName/:repoName" component={Repo}/>
    </Route>
    <Route path="/about" component={About}/>
  </Route>
</Router>

의 아동 구성요소를 활성화하고 싶다.<App>다음과 같이 보일 수 있다.

function App(props) {
  return (
    <div>
      <h1>App</h1>
      <nav>
        <ul>
          <li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/repos">Repos</NavLink></li>
        </ul>
      </nav>
      <ReactCSSTransitionGroup>
        {React.cloneElement(props.children, {
          key: getKey(props.location.pathname)
        })}
      </ReactCSSTransitionGroup>
    </div>
  );
}

다음 작업을 수행해야 한다는 점에 주의하십시오.ReactCSSTransitionGroup하위 구성 요소 외부또한 각 원소마다 고유한 키가 필요하므로ReactCSSTransitionGroup추적할 수 있어Pathname은 일반적으로 좋은 후보군이다.필자의특별한 사용 사례에서,나는 repos 이동해도 이 수준의 전환이 일어나지 않도록 경로 이름의 특정 접두사를 얻기 위해 함수를 사용했다 사이를.무슨 말인지 알겠지.

나는 비슷한 일을 할 수 있다.<Repos>구성 요소:

function Repos(props) {
  return (
    <div>
      <h2>Repos</h2>
      <ul>
        <li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
        <li><NavLink to="/repos/facebook/react">React</NavLink></li>
      </ul>
      <ReactCSSTransitionGroup>
        {props.children ?
          React.cloneElement(props.children, {
            key: props.location.pathname
          }) :
          null}
      </ReactCSSTransitionGroup>
    </div>
  );
}

비슷한 생각이야.이번에 나는 전체 경로명을 사용했는데, 왜냐하면, 이 수준에서, 나는 개별적인 repos 사이의 전환을 원하기 때문이다.

나는 아직 큰 앱에서 이것을 시도해보지 않았으니, 더 경험이 많은 사람에게 미루겠다.그러나, 앞서 말했듯이 적어도 가능해야 한다.당신은 복잡한 애니메이션을 얻기 위해 간단한 애니메이션을 구성할 수 있어야 한다.

ReactCSSTransitionGroup실제로 에 대한 고급 인터페이스 입니다.자식 요소를 다음으로 감싸는 경우<TransitionGroup />, 다음과 같은 추가 라이프사이클 방법을 받게 될 것이다.componentWillEnter(callback)componentWillLeave(callback), 등등...이러한 방법으로 애니메이션을 실행한 다음 애니메이션이 완료되면 콜백을 실행하십시오.나는 애니메이션에 아래 jQuery를 사용하지만, 너는 어떤 애니메이션 라이브러리를 사용하든 요소를 제어할 수 있어.

이 개념을 설명하는 코드:

<Router history={hashHistory}>
  <Route path="/" component={Parent}>
    <Route path="/child" component={Child}/>
  </Route>
</Router>


var Child = React.createClass({
  componentWillEnter: function(callback) {
    var $this = $(ReactDOM.findDOMNode(this));
    $this.css({ opacity: 0 });
    $this.fadeIn('slow', callback);
  },
  componentWillLeave: function(callback) {
    var $this = $(ReactDOM.findDOMNode(this));
    $this.fadeOut('slow', callback);
  },
  render: function() {
    return (
      <p>This child element will fade in when entering and fade out when leaving.</p>
    )
  }
});

var Parent = React.createClass({
  render: function() {
    return (
      <h1>Parent element</h1>
      <TransitionGroup>
        {this.props.children}
      </TransitionGroup>
    )
  }
});

참조URL: https://stackoverflow.com/questions/36403930/complex-animation-possible-with-reactcsstransitiongroup-and-react-router