頁面之間的平滑過渡 - Reactjs

我只是想在所有頁面之間添加平滑過渡。我使用ReactCSSTransitionGroup幷包裝主佈局。就像這樣頁面之間的平滑過渡 - Reactjs

class MainLayout extends Component { 
    render() { 
    return (
     <div> 
     <TopNav /> 
      <ReactCSSTransitionGroup 
      transitionName="example" 
      transitionEnterTimeout={500} 
      transitionLeaveTimeout={300} 
      transitionAppear={true} 
      transitionAppearTimeout={500} 
      > 
      {/* Content */} 
      { this.props.content } 
      </ReactCSSTransitionGroup> 
     <BottomNav /> 
     </div> 
    ); 
    } 
}

這是我的路由配置。

import React from 'react'; 
    import { mount } from 'react-mounter'; 
    import MainLayout from './layouts/MainLayout.jsx'; 
    import Home from './home/Home.jsx'; 

FlowRouter.route('/', { 
    name: 'home', 
    action() { 
    mount(MainLayout, { content: (<Home />) }); 
    setTitle(); 
    }, 
});

現在它工作正常，當第一次加載。但是，導航到其他頁面時，轉換不起作用。我該如何解決這個問題？

來源

2016-06-09 Janath

你可以分享你的路由配置？ –

@GiladArtzi我正在使用流星和流量路由器。說明已更新。 – Janath

你應該通過克隆它，並給它一個鍵，這樣

{React.cloneElement(this.props.children, { 
    key: this.props.location.pathname 
})}

據來自example組件使兒童對路由器

來源

2016-06-09 09:24:52

因此，ReactCSSTransitionGroup將能夠進行轉換，而不是直接在頁面之間切換 –

使用node-uuid包獲取子元素的唯一鍵。你讓我開心！謝謝 – Janath

頁面之間的平滑過渡 - Reactjs

回答

相關問題