页面之间的平滑过渡 - 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

回答

相关问题