based on http://codepen.io/luisrudge/pen/QbEeOR
Created
September 12, 2018 08:23
-
-
Save marquez138/b4c1c2c3e6159ddc7874a7b5a8e4f4c6 to your computer and use it in GitHub Desktop.
Horizonal Sliding Panel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="app"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // transitionName={segment === 'root' ? 'reversePageSwap' : 'pageSwap'} | |
| // https://medium.com/front-end-hacking/react-page-transition-animations-9d18c90a9831#.sb2gac31z | |
| var {Route, DefaultRoute, RouteHandler, Link} = ReactRouter; | |
| var TransitionGroup = React.addons.CSSTransitionGroup; | |
| class Layout extends React.Component { | |
| render() { | |
| var name = this.context.router.getCurrentPath(); | |
| return ( | |
| <div> | |
| <nav> | |
| <ul> | |
| <li><Link to="home">home</Link></li> | |
| <li><Link to="about">about</Link></li> | |
| </ul> | |
| </nav> | |
| <TransitionGroup | |
| component="div" | |
| transitionName="page-transition" | |
| transitionEnterTimeout={500} | |
| transitionLeaveTimeout={300}> | |
| <RouteHandler key={name} /> | |
| </TransitionGroup> | |
| </div> | |
| ); | |
| } | |
| } | |
| Layout.contextTypes = { | |
| router: React.PropTypes.func.isRequired | |
| }; | |
| class Home extends React.Component { | |
| render() { | |
| return ( | |
| <div className="panel home"> | |
| Home! | |
| </div> | |
| ); | |
| } | |
| } | |
| class About extends React.Component { | |
| render() { | |
| return ( | |
| <div className="panel about">About!</div> | |
| ); | |
| } | |
| } | |
| var Routes = ( | |
| <Route name="app" path="/" handler={Layout}> | |
| <Route name="home" handler={Home} /> | |
| <Route name="about" handler={About} /> | |
| <DefaultRoute handler={Home} /> | |
| </Route> | |
| ); | |
| ReactRouter.run(Routes, (Handler) => React.render(<Handler /> , document.getElementById('app'))); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $animationTime: 1s; | |
| $ease: ease-in-out; | |
| .page-transition-enter { | |
| //transition: opacity 10s ease-in-out; | |
| transform: translate(100%); | |
| position: absolute; | |
| } | |
| .page-transition-enter.page-transition-enter-active { | |
| transform: translate(0%); | |
| transition: transform $animationTime $ease; | |
| } | |
| .page-transition-leave { | |
| transform: translate(0%); | |
| position: absolute; | |
| } | |
| .page-transition-leave.page-transition-leave-active { | |
| transform: translate(-100%); | |
| transition: transform $animationTime $ease; | |
| } | |
| .panel { | |
| width: 100%; | |
| min-height: 700px; | |
| } | |
| .panel.home { | |
| background: pink; | |
| } | |
| .panel.about { | |
| background: lightblue; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment