0

这个问题与这篇文章有关：

React Router v4 使用 React Motion 匹配过渡

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

我试图弄清楚如何使用<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;

MatchWithFadethis和来自 React Router 文档的那个只有很小的区别。最大的不同是我拉出了zIndex引用，但这并没有影响行为。

如果相关，我使用 开始这个项目create-react-app，并且我使用的是 React Router 版本4.0.0-alpha.6。

4

1 回答 1

1

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

然后将绝对定位添加回您将样式应用到的包装器 div（网站示例中的 styles.fill ），以便它们可以相互重叠。

这是您的代码修复的要点。

于 2016-12-23T22:08:54.187 回答