2016-12-22 3 views
0

この質問はこの記事に関連しているリアクト:トラブルはルータV4とMatchWithFade

React Router v4 Match transitions using 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> 
    ) 
    } 
} 

、フェードが起こるようになります(ルータ<Link>成分を反応させる使用して)、/oneに移動、私は/twoに移動した場合、ありますフェードすることはありません。その後、私が<MatchWithFade pattern='/two' ... />を最初にリストすると、/twoにフェード遷移がありますが、/oneにはなりません。

ちょうど<Match>を使用するとうまくいきますので、私は<BrowserRouter>がどのように設定されているかという根本的な問題ではないと思います。

私はちょうど何かばかげていると思っていますが、私の人生にとって何が分かりませんか?どんな指導も高く評価されます。

UPDATE

私は、ルータに反応使っjsbinを作っする方法を見つけ出すことができなかった私は今までRR経由を使用しましたので、(、それのメ​​ソッドやオブジェクトを参照する方法を見つけ出すことができませんでしたインポートステートメント)。そこでここでは次善の策です:このMatchWithFade間の唯一の非常にわずかな違いがあります

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; 

、して反応ルータのドキュメントから取り出した1:これは、この問題を示して完全な例です。最大の違いは、私がzIndex参照を取り出したことですが、動作には影響しませんでした。

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

+0

何も私に間違っているとは思わない。すべてのコードで好きなことをスニペット、フィドル、jsbinにまとめることができますか?(おそらくハッシュ・ルータに切り替える必要がありますが、それは問題だとは思わないので、問題ではありません) –

+0

私は確かに試してみることができます。今日や明日にやるよ。 – hairbo

+0

上記の元の投稿に完全な例を追加しました。私はcdnjsからReact Router 4alpha6を参照することができましたが、 'react-router/BrowserRouter'から' BrowserRouterをインポートする 'という類似の呼び出しを見つけることができなかったので、メソッドとオブジェクトを参照する方法を理解できませんでした。 。とにかく、これが役に立つ情報であることを願っています。私はまだ何かばかげていると仮定しているのです。どんな指針も役立ちます! – hairbo

答えて

1

これは、MatchWithFadeの例から適用する(またはしない)スタイルの問題です。 zIndex: 1willLeaveファンクションに追加すると、不透明度が低下するのを確認するために、発信ルートが着信ルートの上に確実に配置されます。

次に、重なり合うようにスタイルを適用するラッパーdiv(website exampleのstyles.fill)に絶対位置を戻します。

Hereは、コードを修正した要点です。

+1

返信いただきありがとうございます。遅延返信をおかけして申し訳ありません。私が今やったことを見ると、やや愚かな気がする。 'MatchWithFade'は子コンポーネントをそれ自身の' div'にラップし、*は* 'position:absolute'が必要な場所です。私は 'div'を' One'と 'Two'コンポーネントのルートdivと融合させていましたので、' One'と 'Two'に' position:absolute'を入れましたが、それは適切な場所ではありません。おかげさまで、ありがとうございました。 – hairbo

関連する問題