UniversalRouter Transitions

Usage example of UniversalRouter with React CSSTransitionGroup addon

HTML

<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://npmcdn.com/[email protected]/universal-router.js"></script>
<div id="root"></div>

CSS

.page-enter {
  opacity: 0.01;
}

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

.page-leave {
  opacity: 1;
}

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

.container { position: relative; }
.content { position: absolute; }
.a { color: #0ac2d2; }
.b { color: #fdc162; }
.c { color: #f68dbb; }

Babel + JSX

function Layout({ path, title, children }) {
  return (
    <div>
      {/*<p>
        <b>Navigation:</b>{' '}
        <Link to="/a">Page A</Link>{' '}
        <Link to="/b">Page B</Link>{' '}
        <Link to="/c">Page C</Link>
      </p> */}
      <React.addons.CSSTransitionGroup
        component="div"
        className="container"
        transitionName="page"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={300}
      >
        <div key={path} className="content">
          <h1>{title}</h1>
          {children}
          <p>Current path: {path}</p>
        </div>
      </React.addons.CSSTransitionGroup>
    </div>
  )
}

function PageA() {
  return (
  	<div>
  	  <p className="a">Sed id ipsum vitae nulla suscipit sagittis.</p>
      <Link to="/b">Page B</Link>
    </div>
  )
}
function PageB() {
   return (<div>
  	  <p className="b">Sed id ipsum vitae nulla suscipit sagittis.</p>
      <Link to="/c">Page C</Link>
    </div>)
}
function PageC() {
   return (<div>
  	  <p className="c">Sed id ipsum vitae nulla suscipit sagittis.</p>
      <Link to="/a">Page A</Link>
    </div>)
}

class Link extends React.Component {
  onClick = (event) => {
    event.preventDefault();
    const path = event.currentTarget.pathname;
    navigateTo(path);
  }
  render() {
    return (
      <a href={this.props.to} onClick={this.onClick}>
        {this.props.children}
      </a>
    );
  }
}

const routes = {
  path: '/',
  async action({ next }) {
    const page = await next();
    if (page !== undefined) {
      return (
        <Layout path={page.context.path} title={page.title}>
          {page.component}
        </Layout>
      );
    }
  },
  children: [
    { path: '/a', action(context) {
      return { context, title: 'Title A', component: <PageA /> };
    }},
    { path: '/b', action(context) {
      return { context, title: 'Title B', component: <PageB /> };
    }},
    { path: '/c', action(context) {
      return { context, title: 'Title C',...