問題タブ [react-transition-group]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
1546 参照

javascript - Next.JS 6 で _app.js ページ コンポーネントを使用すると、トランジションの起動が早すぎる

Next JS 内で比較的単純なページ遷移を設定しようとしています。私はアニメーション ライブラリとして GSAP TweenLite を使用しており、トランジションを処理するために react-transition-group を使用しています。Next.js 6.0 で導入された _app.js コンポーネントでこれらすべてを実行しようとしています。私はそれを「ある程度」機能させていますが、私がやりたいことを正確に行っているわけではありません。

私が抱えている問題は、新しいルートがヒットすると、そのルートのページ コンポーネントがすぐに DOM の上部に遷移し、Exiting コンポーネントが遷移してアンマウントされるまでページの下部にプッシュされることです。

私がやりたいことは、現在のページコンポーネントを移行してマウント解除し、ルートが変更されたときに新しいページコンポーネントを移行してマウントすることです。これをより適切に設定する方法について誰かアドバイスがあれば、大いに感謝します。

0 投票する
0 に答える
784 参照

reactjs - React - ネストされたルートで react-transition-group TransitionGroup を使用する

この問題を検索しましたが、ネイティブの react-transition-group で解決策が見つかりませんでした。

Home と Order の 2 つのコンポーネントがあります。これらにはルート遷移を使用します。これらの平坦なルートでは、すべてがうまく機能します。

Home コンポーネントのサブルートにルート遷移を使用したい。ただし、サブルートをアニメーション化する場合は、常に Home コンポーネントがアニメーション化されます。以下のサブルートを見つけることができます。

これは、ホーム コンポーネントのイメージです。

ここに画像の説明を入力

サブルートだけをアニメーション化するにはどうすればよいですか?

助けてくれてありがとう