React路由器更改按鈕上的transitionName點擊

我已將CSSTransitionsGroup添加到我的React-Router以創建頁面轉換。現在，我想要根據點擊哪個鏈接進行不同的轉換。例如：我總是希望使用'淡入淡出'，除了當我點擊'工作'按鈕時，我想使用'slideLeft'。我正在使用React-Router 4以及來自https://facebook.github.io/react/docs/animation.html的正常React動畫插件。React路由器更改按鈕上的transitionName點擊

我的路由器和轉換

我的應用組件是這樣的：

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import { Route, Switch } from 'react-router-dom'; 
import { Provider } from 'react-redux'; 
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' // ES6 
import { ConnectedRouter } from 'react-router-redux'; 

import createHistory from 'history/createBrowserHistory'; 

const history = createHistory(); 

import Home from '../containers/Home'; 
import Work from '../containers/Work'; 
import BTS from '../containers/BTS'; 
import SinglePage from '../containers/SinglePage'; 
import NotFound from '../containers/NotFound'; 
import store from '../store'; 

export default class App extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <ConnectedRouter history={history}> 
      <Route render={({ location }) => (
      <CSSTransitionGroup 
       transitionName="fade" 
       transitionEnterTimeout={500} 
       transitionLeaveTimeout={300}> 
       <Switch key={location.key} location={location}> 
       <Route exact path="/" component={Home}/> 
       <Route exact path="/work" component={Work}/> 
       <Route exact path="/behind-the-scenes" component={BTS}/> 
       <Route path="/about" component={SinglePage}/> 
       <Route component={NotFound}/> 
       </Switch> 
      </CSSTransitionGroup> 
     )}/> 
     </ConnectedRouter> 
     </Provider> 
    ); 
    } 
}

而且我的家庭成分剛好有3個簡單的按鈕：

import React, { Component } from 'react'; 
import {connect} from 'react-redux'; 
import { Link, withRouter } from 'react-router-dom'; 

export default class Home extends Component{ 

    render() { 
    return(
     <div className="home page"> 
     <main> 
       <ul> 
       <li><Link to="/work">Work</Link></li> 
       <li><Link to="/behind-the-scenes">behind the scenes</Link></li> 
       <li><Link to="/3eBtn">3e Btn</Link></li> 
       </ul> 
     </main> 
     </div> 
    ) 
    } 
}

所以它總是使用淡入淡出，因爲我叫transitionName="fade" ，但是當我點擊'/ work'鏈接時，我想調用'SlideLeft'。

來源

2017-06-22 coder14

試試這個：

穿上的transitionName值的條件下，當位置將是work然後分配SlideLeft否則fade。

<CSSTransitionGroup 
    transitionName={location.pathName == "work" ? "SlideLeft" : "fade"}

來源

2017-06-22 14:32:33

嗯，這是一個聰明的方法。但是，例如，如果我從我的菜單轉到「作品」鏈接，我希望它淡出。當我點擊特定按鈕時，它只需要做其他轉換。這可能嗎？ – coder14

不確定這一點，但你可以嘗試把條件:) –

React路由器更改按鈕上的transitionName點擊

回答

相關問題