Reactでページ切り替え効果を実現する方法

この記事の内容は React でページ切り替え効果を実現する方法についてです。必要な方は参考にしていただければ幸いです。

1. 前回の状況の概要

注: (私が使用するルートはreact-router4です)
以下の図に示すように、ページの切り替えが表示されないように、ページを切り替えるときにトランジション効果を持たせる必要があります。硬くてユーザーエクスペリエンスが大幅に改善されました

しかし問題は、react のルーティングアニメーションが vue でいくつかのスタイルを記述するだけで完了することです。react ではプラグインもインストールする必要があります。 ;
そこで私はオンラインで探しました 以下の方法では、react-addons-css-transition-group などのように、プラグインのインストール、ルーティング構造の変更、vuex の実行、およびアニメーションに入るタイミングの決定が必要です。 .
試してみました 2つほど方法を試しましたが、なぜうまくいかなかったのかわかりません... 知らず知らずのうちに秋が来て、冷たい風が吹いていますが、vueのことを思わずにはいられません。後戻りはできない;

2. 紆余曲折

このとき、次の記事でプラグインを見つけました:

リンク: リアクトルーター v4 とリアクトトランジショングループを使用してページルーティングスイッチングを実現するアニメーション効果

これは、アニメーショントランジションの親コンポーネントのバグを解決した後、作者によってカプセル化されました
それで、試してみる予定です

3 つ。Qiankun Yi を投げます

使い方は非常に簡単で、2 つのステップに分かれています
1. インストール:

  npm install react-animated-router --save

2. プロジェクトでの使用:

   import AnimatedRouter from 'react-animated-router'; //我们的AnimatedRouter组件
   import 'react-animated-router/animate.css'; //引入默认的动画样式定义

次にルーティング コンポーネントを追加します。Switch は AnimatedRouter に置き換えることができます
コンポーネント作成者の記事に従ってこれら 2 つの手順を完了すると、エラーが報告されました:

4. 船を壊す

紆余曲折は長い話ですが、最終的にはまだ続きがあることに気付きました。 さらに、2 つのプラグインをインストールします。

    npm install react-transition-group@2.3.0 --save
   npm install –save-dev prop-types

次に、ページです。コンポーネントの作者のおかげで、エラーなしで正常に実行でき、ページ切り替え効果も利用できます
アニメーション切り替え用のスタイル ファイルがnode_modulesreact-animated-routeranimate.cssにあることを追加する必要があります。ここでは、直接変更できます。ニーズに応じたアニメーション効果。
または、コピーして修正し、再度引用する方が良いかもしれません

おすすめ関連記事:

React-Native+Mobx がモール APP を実装

React Native が認証コードのカウントダウン機能を実装

アクティビティ切り替えアニメーションとページ切り替えAnimation_html/css_WEB-ITnose

HTML5単一ページジェスチャのスライディング画面切り替えの実装方法

以上がReactでページ切り替え効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。