経路切り替えアニメーション

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をチェックアウトすることができます。反応ルータv4で作業している場合は、すでにissue threadに現在のソリューションについて話している人がいます。