这个问题与这篇文章有关：
React Router v4 Match transitions using React Motion
......但我认为它应该有自己的问题。
我试图弄清楚如何使用此处的<MatchWithFade>示例：
https://react-router.now.sh/animated-transitions
我看到的问题是，如果我有两个标签，并且我想在它们之间淡入淡出，我只看到两个标签之一的淡入淡出效果，这取决于哪个{ {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>
)
}
}
（使用React Router /one组件）将导致淡入淡出，但如果我导航到<Link>，则不会出现淡入淡出。然后，如果我先列出/two，那么我会看到淡入淡出过渡到<MatchWithFade pattern='/two' ... />，但不是/two。
使用/one工作正常，所以我认为这不是我<Match>配置的基本问题。
我希望我只是在做一些愚蠢的事情，但对于我的生活，我无法弄清楚是什么。任何指导都表示赞赏。
更新
我无法弄清楚如何使用React Router制作一个jsbin（无法弄清楚如何引用它上面的方法和对象，因为我只通过import语句使用了RR ）。所以这是下一个最好的事情：这是一个演示此问题的完整示例：
<BrowserRouter>此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;
与从React Router文档中获取的差异非常小。最大的区别是我提取了MatchWithFade引用，但这并没有影响行为。
如果相关，我使用zIndex启动了此项目，并且我使用了React Router版本create-react-app。
答案 0 :(得分：1)
这是您在MatchWithFade示例中应用（或不应用）的样式的问题。将zIndex: 1添加回willLeave功能，因为这样可以确保传出路由超过传入路径，以便查看不透明度淡化。
然后将绝对定位添加回包装器div，然后将样式应用于（{3}}中的styles.fill），以便它们可以相互重叠。
website example是修复代码的要点。