0

この質問は、この投稿に関連しています。

React Router v4 React Motion を使用したトランジションの一致

...しかし、私はそれが独自の質問に値すると思いました.

ここから取った例を使用する方法を理解しようとして<MatchWithFade>います:

https://react-router.now.sh/animated-transitions

私が見ている問題は、2 つのタブがあり、それらの間をフェードしたい場合、2 つのタブのうちの 1 つにのみフェード効果が見られ、どちら<MatchWithFade>がコードに最初に表示されるかによって異なります。

関連するコードは次のとおりです。

const One = () => {
  return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, backgroundColor: 'orange'}}>
      One one one one one one one one one one
    </div>
  )
}

const Two = () => {
  return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, backgroundColor: 'yellow'}}>
      Two two two two two two two two two two
    </div>
  )
}

class AppBody extends Component {

  render () {

    return (
      <div style={{position: 'relative'}}>
        <MatchWithFade pattern='/one' component={One} />
        <MatchWithFade pattern='/two' component={Two} />
      </div>
    )
  }
}

この例では/one、(React Router<Link>コンポーネントを使用して) に移動するとフェードが発生しますが、 に移動して/twoもフェードは発生しません。次に、最初にリストすると、<MatchWithFade pattern='/two' ... />へのフェード トランジションが表示されます/twoが、 ではありません/one。

使うだけ<Match>で問題なく動作するので、構成の根本的な問題ではないと思い<BrowserRouter>ます。

私は何かばかげたことをしているだけだと思っていますが、私の人生では、何を理解することはできません. 任意のガイダンスをいただければ幸いです。

アップデート

React Router を使用して jsbin を作成する方法がわかりませんでした (インポート ステートメントを介して RR しか使用したことがないため、メソッドとオブジェクトを参照する方法がわかりませんでした)。次善の策は次のとおりです。これは、この問題を示す完全な例です。

import React, { Component } from 'react';
import BrowserRouter from 'react-router/BrowserRouter'

import { TransitionMotion, spring } from 'react-motion'
import Match from 'react-router/Match'

import Link from 'react-router/Link';

const MatchWithFade = ({ component:Component, ...rest }) => {
  const willLeave = () => ({ opacity: spring(0) })

  return (
    <Match {...rest} children={({ matched, ...props }) => {
      return (
        <TransitionMotion
          willLeave={willLeave}
          styles={matched ? [ {
            key: props.location.pathname,
            style: { opacity: 1 },
            data: props
          } ] : []}
        >
          {interpolatedStyles => {
            return (
              <div>
                {interpolatedStyles.map(config => (
                  <div
                    key={config.key}
                    style={{...config.style }}
                  >
                    <Component {...config.data}/>
                  </div>
                ))}
              </div>
            )
          }}
        </TransitionMotion>
      )
    }}/>
  )
}

const One = () => {
  return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, border: '1px solid black', backgroundColor: 'orange', minHeight: 200}}>
      One one one one one one one one one one<br />
      One one one one one one one one one one<br />
    </div>
  )
}

const Two = () => {
  return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, border: '1px solid black', backgroundColor: 'yellow', minHeight: 200}}>
      Two two two two two two two two two two<br />
      Two two two two two two two two two two<br />
    </div>
  )
}


class App extends Component {

  render () {
    return (
        <BrowserRouter>
          <div style={{padding: 12}}>
            <div style={{marginBottom: 12}}>
              <Link to='/one'>One</Link> || <Link to='/two'>Two</Link>
            </div>
            <div style={{position: 'relative'}}>
              <MatchWithFade pattern='/one' component={One} />
              <MatchWithFade pattern='/two' component={Two} />
            </div>
          </div>
        </BrowserRouter>
    )
  }
}

export default App;

MatchWithFadeこのと React Router のドキュメントから取ったものとの間には、ごくわずかな違いしかありません。最大の違いは、参照を引き出したことですzIndexが、動作には影響しませんでした。

関連する場合は、このプロジェクトを使用して開始しcreate-react-app、React Router バージョンを使用して4.0.0-alpha.6います。

4

1 に答える 1

1

これは、例から適用している (または適用していない) スタイルの問題ですMatchWithFade。これにより、不透明度のフェードを確認するために、発信ルートが着信ルートの上にあることが保証されるため、関数に追加zIndex: 1します。willLeave

次に、スタイルを適用するラッパー div (webサイトの例では styles.fill ) に絶対位置を追加して、それらが互いに重なり合うようにします。

コードを修正した要点を次に示します。

于 2016-12-23T22:08:54.187 に答える