ReactCSSTransitionGroup與reactJS 15和ReactRouter 4

我想創建一個反應路由器的過渡動畫，但它似乎不起作用（沒有轉換）。ReactCSSTransitionGroup與reactJS 15和ReactRouter 4

正如你可以看到下面，所有我所做的是創建一個組件FadeRoute其使用ReactCSSTransitionGroup創建一個動畫，然後我用它的開關成分反應路由器-DOM

這裏我反應過來代碼

import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; 
import { browserHistory } from "react-router"; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group' 


function FadeRoute({ component: Component, ...rest }) { 
    return (
     <Route {...rest} children={({ location, match }) => (
      <ReactCSSTransitionGroup 
        transitionName="fade" 
        transitionEnterTimeout={300} 
        transitionLeaveTimeout={300}> 
      <Component /> 
     </ReactCSSTransitionGroup> 
    ) 
} /> 
     ); 
    } 


class App extends React.Component { 

    render() { 
     return (

      <Router history={browserHistory}> 
       <Switch> 
        <FadeRoute exact path="/" component={Home} /> 
        <FadeRoute exact path="/NextComponent" component={NextComponent} /> 
        <FadeRoute component={NoMatch} /> 
       </Switch> 
      </Router> 

     ); 
    } 

} 

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
);

這裏的CSS代碼

.fade-enter { 
    opacity: 0.01; 
} 

.fade-enter.fade-enter-active { 
    opacity: 1; 
    transition: opacity 500ms ease-in; 
} 

.fade-leave { 
    opacity: 1; 
} 

.fade-leave.fade-leave-active { 
    opacity: 0.01; 
    transition: opacity 300ms ease-in; 
}

能否請你幫我找到哪裏是PB？感謝您提前

來源

2017-05-29 MrGildarts

我設法通過將整個開關包裝在一個管理CSSTransitionGroup的組件中來實現它。 CSSTransitionGroup需要同時臨時呈現2條路由才能在它們之間淡入，所以它需要坐在更高的層次上。

class Fade extends Component { 

    render() { 
     return (
      <Route render={({location}) => (
       <CSSTransitionGroup 
        transitionName="fade" 
        transitionEnterTimeout={200} 
        transitionLeaveTimeout={200} 
       > 
        {React.cloneElement(this.props.children, {location: location, key: location.key})} 
       </CSSTransitionGroup> 
      )}/> 
     ); 
    } 
} 


class App extends Component { 

    render() { 
     return (
      <BrowserRouter> 
       <Fade> 
        <Switch> 
         <Route exact path="/" component={Home}/> 
         <Route path="/portfolio" component={Portfolio}/> 
         <Route path="/contact" component={Contact}/> 
         <Route component={NoMatch}/> 
        </Switch> 
       </Fade> 
      </BrowserRouter> 
     ); 
    } 
}

來源

2017-05-30 09:50:00 RichardY

謝謝，如果我們把所有的開關都換掉，但是我們無法對它進行個性化設置（改變每個路徑的過渡組的類型：ex fade，s Lide ...） – MrGildarts

可能不是最優雅的解決方案，但是您可以根據Fade組件中的location prop更改您的transitionName ...現在想不到更好的方法。 – RichardY

我看到，通過在Fade組件中添加一個開關來檢查location.pathname並返回transitionName，這取決於大小寫，它可以是一個解決方案thnx – MrGildarts

我處理與像@RichardY類似的解決方案，我發佈的組件組合型和您可以使用那裏所有的過渡*參數...

https://github.com/melounek/switch-css-transition-group

編輯：這樣你就可以像這樣使用它：

import SwitchCSSTransitionGruoup from 'switch-css-transition-group' 
// ... 
<SwitchCSSTransitionGruoup 
    transitionName="fade" 
    transitionEnterTimeout={300} 
    transitionLeaveTimeout={300}> 
    <Route exact path="/" component={Home}/> 
    <Route path="/portfolio" component={Portfolio}/> 
    <Route path="/contact" component={Contact}/> 
    <Route component={NoMatch}/> 
</SwitchCSSTransitionGruoup >

來源

2017-07-18 11:44:56 Melounek

雖然此鏈接可能回答問題，但最好包含基本部分的答案，並提供參考鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – Sneha

ReactCSSTransitionGroup與reactJS 15和ReactRouter 4

回答

相關問題