React Router v4动画转换示例

动画转换示例provided in the v4 docs对我来说似乎有些复杂，因为它描绘了淡入淡出相同的组件并调整背景颜色。React Router v4动画转换示例

我试图将这种技术应用于一个更现实的淡出一个组件和另一个组件的例子，但我无法让它正常工作（它似乎只是淡出第一个，然后第二个出现的画面，而这种转变只能（在没有过渡后退按钮的结果）的一种方式

这里是我的代码，它使用的MatchWithFade一个精简版的例子：

import React from 'react'; 
import { TransitionMotion, spring } from 'react-motion' 
import { HashRouter, Match, Miss } from 'react-router'; 
import Home from './components/Home'; 
import Player from './components/Player'; 
import FormConfirmation from './components/FormConfirmation'; 

const App =() => (
    <HashRouter> 
    <div className="App"> 
     <MatchWithFade exactly pattern="/" component={Home} /> 

     <MatchWithFade pattern="/player/:playerId" component={Player} /> 

     <MatchWithFade pattern="/entered" component={FormConfirmation} /> 

     <Miss render={(props) => (
     <Home players={Players} prizes={Prizes} {...props} /> 
    )} /> 
    </div> 
    </HashRouter> 
); 

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

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

export default App;

我意识到这个问题几乎是this one的重复，然而那个人有一个公认的答案，实际上并没有回答问题。

来源

2016-12-20 dougmacklin

我对'react-motion'并不是特别熟悉，但它看起来像''有一个'willEnter'的道具。你尝试过使用它吗？ –

只是一个疯狂的猜测：你有固定/绝对位置设置？ –

我对'react-motion'也不太熟悉，但看着你的代码，我想知道它是否与你试图转换的z-index有关。 'TransitionMotion'组件的默认样式没有z-index，所以这可能会导致转换。尝试用类似这样的东西替换该行：'style：{zIndex：2，opacity：spring（1）}' - 我不知道'spring'位是否必要？但是你也可以尝试用你的z-index来包装你的z-index。 –

v4 docs已移至react-transition-group，因此您可能会考虑执行此操作。

关于“淡入淡出相同的组件”，它不是真正的组件实例。两个实例同时存在并可以提供交叉淡入淡出。 react-motion docs说“TransitionMotion一直保持c左右”，我想react-transition-group是一样的。

来源

2017-12-25 23:47:03 Jayen

谢谢@Jayen，这很有道理。我在一年前提交了这个问题，所以它很可能非常过时。我个人不再寻找解决这个问题的办法，但是我将它打开，因为它似乎仍然收到了相当数量的流量，这导致我相信其他人也在寻找比文档提供的更好的示例。 – dougmacklin

React Router v4动画转换示例

回答

相关问题