React Router v4 和 MatchWithFade 的问题

Question

这个问题与post相关：

...但我认为它应该有自己的问题。

我正在尝试弄清楚如何使用从此处获取的 <MatchWithFade> 示例：

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

我看到的问题是，如果我有两个选项卡，并且我想在它们之间淡入淡出，我只会在两个选项卡之一上看到淡入淡出效果，这取决于哪个 <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（不知道如何引用其中的方法和对象，因为我只通过 import 语句使用过 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。

Answer 1

这是您应用（或不应用）MatchWithFade 示例中的样式的问题。将 zIndex: 1 添加回您的 willLeave 函数，因为这可确保传出路线位于传入路线之上，以便看到不透明度逐渐消失。

然后将绝对定位添加回包装器 div 您正在将样式应用于（website example 中的 styles.fill），以便它们可以相互重叠。

Here 是您的代码已修复的要点。

React Router v4 和 MatchWithFade 的问题

Trouble with React Router v4 and MatchWithFade

reactjs

react-router

react-motion