切換路線動畫

Question

最近，我用ReactCSSTransitions從一側「滑動」新頁面。這工作正常，當然，現在執行的那一刻，前一頁將是空白的。我需要讓上一頁保持渲染狀態，直到我的新頁面從切換路線的一側開始動畫。

這將是實現這一目標的正確方法？我是否需要強行收集HTML頁面，並將其與新頁面一起拖動，並在按「返回」時保存它？

Answer 1

我不推薦使用react-router-transition來替代過渡組來手動執行此操作。

你必須做你的愛情頂級根應用程序組件是這樣的：

import { RouteTransition } from 'react-router-transition' 

<RouteTransition 
    pathname={this.props.location.pathname} 
    atEnter={{ translateX: 100 }} 
    atLeave={{ translateX: -100 }} 
    atActive={{ translateX: 0 }} 
    mapStyles={styles => ({ transform: `translateX(${styles.translateX}%)` 
})}> 
    {this.props.children} 
</RouteTransition> 

它使用react-motion引擎蓋下，其結果是相當不錯的。您可以結帳演示here。如果使用react-router v4，那麼issue thread中已經有人在討論當前的解決方案。