反応のアニメーションページ遷移

ページ間のアニメーション遷移は、あなたの単一のページのWebアプリをより魅力的にすることができますし、ユーザーがアプリケーションに興味を維持し、彼らがロードするためのページを待っての代わりに見ていたもののコンテキストを維持します.アニメーションはいくつかの時間のために効果的な、ユーザーの経験を簡素化し、コンテンツをより魅力的で楽しいものにするためにいくつかの時間のためにWeb上で使用されている.これまでにウェブサイトをスクロールし、どのようにウェブサイトのページ間のアニメーションを作るだろうか?はい、私はこの記事をどのように簡単に1つのページのWebアプリケーション内のルート間の単純なアニメーションを作成することを示しています.
Take a look at how Material Design describes the importance of animation.

シンプルなCSSの移行

Response Teamは、CSSアニメーションをコンポーネントに反応させる簡単な方法を可能にする反応CSS移行グループと呼ばれる反応のためのコミュニティ維持APIアドオンコンポーネントをサポートします.The ReactCSSTransitionGroup は、react-transition-group パッケージ、およびコンポーネントのアニメーションサイクルの段階のCSSクラスを定義するのに便利です.page-transition-enter or .page-transition-leave . 私は使用されますReactCSSTransitionGroup 私のデモでは、CSSの遷移を介して反応アプリで2つのページの迅速かつ容易に入り口と終了アニメーションを作る.

コンポーネントを包み込むルートとしてreactCsstransitionGroupを加えます
最初に含める必要がありますReactCSSTransitionGroup このコンポーネントを使用してルートをラップします.このデモのために選択するTransitionNameはpage-transition .

// React
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

class Layout extends React.Component {
  render() {
    return (
      <div>
        // Add ReactCSSTransitionGroup to Routes with name: 'page-transition'
        <ReactCSSTransitionGroup component="div" transitionName="page-transition">
           <Routes />
        </ReactCSSTransitionGroup>
      </div>
);}}

CSSクラス名をルートに適用する
次に、各ルートコンポーネントを含めるCSSクラス名を追加する必要がありますので、正しくスタイルを作成し、アニメーションを適用できます.

// Setting Home Route up with "transition" CSS class
class Home extends React.Component {
  render() {
    return (
      <div className="transition blue">
           <Link to="about">
              <h1>NEXT</h1>
           </Link>
      </div>
    );
}}

// Setting About Route up with "transition" CSS class
class About extends React.Component {
  render() {
    return (
      <div className="transition coral">
          <Link to="home">
            <h1>LAST</h1>
          </Link>
      </div>
    );
}}

CSS

我々がスタイルに必要とするCSSは、彼らが活発な間、各々の構成要素の表示を含みますReactCSSTransitionGroup 我々はアニメーション化したいと思います.覚えて、我々は選んだpage-transition 我々のReactCSSTransitionGroup TransitionNameを指定するので、APIは、遷移クラスの実行中にその同輩クラス名を持つクラスを探します.私たちはちょうどページが入って、去るので、アニメーション化したいです.page-transition-enter and .page-transition-leave 一緒にシンプルなクラス.

//CSS
$time: 2s;
$easing: ease-in-out;

// Style components how they should appear when active
.transition {
  width: 100%;
  height: 100%;

  div {
    transition: all $time/2 $easing;
    width: 99vw;
    height: 97vh;
    margin: .5% auto;
  }

  h1 {
    transition: all $time/2 $easing;
    transform: translateY(0);
  }

  &.coral > div {
    background: #f34044;
  }

  &.blue > div {
    background: #405efb;
  }
}

// Style page transition animations under the ReactCSSTransitionGroup name we chose: 'page-tansition' 
.page-transition-enter, .page-transition-leave {
  transition: opacity $time $easing;
  opacity: 0;
  position: absolute;

  div {
     margin-top: 35%;
     height: 0;
     opacity: 0;
     width: 20vw;
  }

  h1 {
    transform: scale(.8);
    opacity: 0;
  }
}

.page-transition-enter.page-transition-enter-active {
  opacity: 1;
}

.page-transition-leave.page-transition-leave-active  {
  opacity: 0;
}

アプリケーションの例

私はコードの完全な例を持っているので、Codepenで我々のアプリケーションのデモを作成しました.これからコードの一部またはすべてを盗むのを感じてくださいCodePen example , しかし、あなたはおそらくあなた自身のアプリケーションに合うようにスタイリングを調整する必要があります、あなたがそれをしたいのですが注意してください.

結論

私は、それが反応でアニメーションページ遷移に来るとき、ちょうど表面に触れています、しかし、それはこれまでに学ぶために刺激的でした、そしてReactCSSTransitionGroup 簡単に基本的なCSSアニメーションと変換コンポーネントのライフサイクルでの実装を実装することができます.正しく行われると、ページ遷移にアニメーションを追加すると、それをより楽しく使用して、あなたのアプリのユーザーエクスペリエンスを向上させることができますし、それをより応答性と高速感を与える.

を使用するための追加リソース

CSS-Tricks: Animating Between Views in React

React Docs: Animation Add-Ons

React Community: React Transition Group

あなたの反応プロジェクトでアニメーションページの遷移を使用したことがありますか?
あなたがReactCsStatsitionGroupを使用している場合、コメントは別のお気に入りのライブラリを持っているか、改善のための任意の提案がある!