Question

在我们目前的项目中，我们使用手风琴之类的效果来处理少量内容页面。（示例：打开https://domena.redesignum.cz/search/hello%20github点击任意域，然后点击“pokračovat”右下角。如你看到的。当你进入另一个页面时，会出现缩小第一页和第二页的动画。

在我目前的解决方案中，我正在使用react-routes doc的“无反应路由器”解决方案。

简化代码

render() {
  if(this.props.route == "/search/my-domain") {
    <div className="wrapper">
      <ContentTransition key="search" width="100%">
        <div className="search">
          <div>Search content</div>
        </div>
      </ContentTransition>
      <ContentTransition key="domains" width={0}>
        <div className="domains">
          <div>Domain content</div>
        </div>
      </ContentTransition>
    </div>
  } else if(this.props.route == "/domains") {
    <div className="wrapper">
      <ContentTransition key="search" width={100}>
        <div className="search">
          <div>Search content</div>
        </div>
      </ContentTransition>
      <ContentTransition key="domains" width={this.props.windowWidth - 100}>
        <div className="domains">
          <div>Domain content</div>
        </div>
      </ContentTransition>
    </div>
  }
}

仅在页面之间进行更改是ContentTransition组件的属性。 ContentTransition是我的组件，其作用与反应Css过渡相同，但动画引擎是Greensock。

这一点是组件保存在dom中，动画可以正常工作。

当我尝试重构为react-router（1.0.0.beta3但与0.13.3相同的问题）时，我将此if / else拆分为单独的组件（页面）并将其应用于路由器的反应。

<Route component={App}>
  <Route path="/search/:name" component={SearchPage} />
  <Route path="/domains" component={DomainsPage} />
</Route>

// SearchPage component
render() {
  <div className="wrapper">
    <ContentTransition width="100%">
      <div className="search">
        <div>Search content</div>
      </div>
    </ContentTransition>
    <ContentTransition width={0}>
      <div className="domains">
        <div>Domain content</div>
      </div>
    </ContentTransition>
  </div>
}

// DomainPage component
render() {
  <div className="wrapper">
    <ContentTransition width="100%">
      <div className="search">
        <div>Search content</div>
      </div>
    </ContentTransition>
    <ContentTransition width={0}>
      <div className="domains">
        <div>Domain content</div>
      </div>
    </ContentTransition>
  </div>
}

动画无法正常工作，因为在每个路径转换中，页面组件也会被另一个和子组件替换。这打破了动画。

这个问题有没有解决办法或最佳实践？

Answer 1

我问了一个类似的question here，解决了我的问题是确保你不想重新安装的组件密钥在转换过程中保持不变。

如果您希望两个子路由都处于活动状态，并假设您的搜索组件是父路由，则应将域页面嵌套在搜索页面中。这样，当您进行转换时，搜索组件将不会重新装入，并且域组件中的内容将在没有动画中断的情况下呈现。

<Route component={App}>
  <Route path="/search/:name" component={SearchPage}>
     <Route path="/domains" component={DomainsPage} />
  </Route>
</Route>

反应路由器动画。如何在路由转换期间保护组件不被卸载

1 个答案: