mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Remove page-transitions example
This commit is contained in:
Tim Neutkens
parent
3f6834dfec
commit
2e9bed098d
|
|
@ -1,44 +1 @@
|
||||||
[](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/page-transitions)
|
This example has been deprecated and removed in favor of https://github.com/zeit/next.js/tree/canary/examples/with-next-page-transitions
|
||||||
|
|
||||||
# Example app with custom page transitions
|
|
||||||
|
|
||||||
## How to use
|
|
||||||
|
|
||||||
### Using `create-next-app`
|
|
||||||
|
|
||||||
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx create-next-app --example page-transitions page-transitions-app
|
|
||||||
# or
|
|
||||||
yarn create next-app --example page-transitions page-transitions-app
|
|
||||||
```
|
|
||||||
|
|
||||||
### Download manually
|
|
||||||
|
|
||||||
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/page-transitions
|
|
||||||
cd page-transitions
|
|
||||||
```
|
|
||||||
|
|
||||||
Install it and run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
npm run dev
|
|
||||||
# or
|
|
||||||
yarn
|
|
||||||
yarn dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
|
||||||
|
|
||||||
```bash
|
|
||||||
now
|
|
||||||
```
|
|
||||||
|
|
||||||
## The idea behind the example
|
|
||||||
|
|
||||||
Being able to animate out old content and animate in new content is a fairly standard thing to do these days. We can hijack the route change and do any animations that we want: sliding, cross fading, scaling, et al.
|
|
||||||
|
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
{
|
|
||||||
"name": "page-transitions",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "NODE_ENV=development node server.js",
|
|
||||||
"build": "next build",
|
|
||||||
"start": "NODE_ENV=production node server.js"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"compression": "^1.7.0",
|
|
||||||
"express": "^4.15.3",
|
|
||||||
"next": "latest",
|
|
||||||
"next-routes": "^1.0.40",
|
|
||||||
"raf": "^3.3.2",
|
|
||||||
"react": "^16.0.0",
|
|
||||||
"react-dom": "^16.0.0"
|
|
||||||
},
|
|
||||||
"license": "ISC"
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import Document, { Head, Main, NextScript } from 'next/document'
|
|
||||||
|
|
||||||
// ---------------------------------------------
|
|
||||||
|
|
||||||
export default class CustomDocument extends Document {
|
|
||||||
render () {
|
|
||||||
return (<html lang='en-US'>
|
|
||||||
<Head>
|
|
||||||
<meta name='viewport' content='width=device-width, initial-scale=1' />
|
|
||||||
<meta name='robots' content='noindex' />
|
|
||||||
<link rel='stylesheet' href='/static/style.css' />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<Main />
|
|
||||||
<NextScript />
|
|
||||||
</body>
|
|
||||||
</html>)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
import { PureComponent } from 'react'
|
|
||||||
import raf from 'raf'
|
|
||||||
import { Router } from '../routes'
|
|
||||||
import Main from './main'
|
|
||||||
|
|
||||||
// -----------------------------------------------
|
|
||||||
|
|
||||||
Router.onRouteChangeStart = () => {
|
|
||||||
const $container = document.getElementById('container')
|
|
||||||
const $clone = $container.cloneNode(true)
|
|
||||||
|
|
||||||
document.body.classList.add('loading')
|
|
||||||
$clone.classList.add('clone')
|
|
||||||
|
|
||||||
raf(() => {
|
|
||||||
$container.parentNode.insertBefore($clone, $container.nextSibling)
|
|
||||||
$clone.classList.add('animate-out')
|
|
||||||
$container.classList.add('animate-in')
|
|
||||||
})
|
|
||||||
|
|
||||||
$clone.addEventListener('animationend', () => {
|
|
||||||
document.body.classList.remove('loading')
|
|
||||||
$container.classList.remove('animate-in')
|
|
||||||
$clone.parentNode.removeChild($clone)
|
|
||||||
}, { once: true })
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------
|
|
||||||
|
|
||||||
export default class Index extends PureComponent {
|
|
||||||
static async getInitialProps ({ query }) {
|
|
||||||
const pathname = query.slug || '/'
|
|
||||||
return { pathname }
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
return <Main {...this.props} />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
import { PureComponent } from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import Head from 'next/head'
|
|
||||||
import { Link } from '../routes'
|
|
||||||
|
|
||||||
// -----------------------------------------------
|
|
||||||
|
|
||||||
export default class Main extends PureComponent {
|
|
||||||
render () {
|
|
||||||
return (<div>
|
|
||||||
<Head>
|
|
||||||
<title>{this.props.pathname} - Page Transitions</title>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<Link to='/'>
|
|
||||||
<a className={this.props.pathname === '/' ? 'active' : ''}>Homepage</a>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Link route='main' params={{ slug: 'about' }}>
|
|
||||||
<a className={this.props.pathname === 'about' ? 'active' : ''}>About</a>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Link route='main' params={{ slug: 'contact' }}>
|
|
||||||
<a className={this.props.pathname === 'contact' ? 'active' : ''}>Contact</a>
|
|
||||||
</Link>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div id='container' className={`page-${this.props.pathname}`}>
|
|
||||||
<h1 dangerouslySetInnerHTML={{ __html: this.props.pathname }} />
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Main.propTypes = {
|
|
||||||
pathname: PropTypes.string.isRequired
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
const nextRoutes = require('next-routes')
|
|
||||||
const routes = nextRoutes()
|
|
||||||
|
|
||||||
routes.add('main', '/:slug/:child?', '')
|
|
||||||
|
|
||||||
module.exports = routes
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
const next = require('next')
|
|
||||||
const routes = require('./routes')
|
|
||||||
const express = require('express')
|
|
||||||
const compression = require('compression')
|
|
||||||
|
|
||||||
const port = parseInt(process.env.PORT, 10) || 3000
|
|
||||||
const dev = process.env.NODE_ENV !== 'production'
|
|
||||||
|
|
||||||
const app = next({ dev })
|
|
||||||
const handle = routes.getRequestHandler(app)
|
|
||||||
|
|
||||||
app.prepare().then(express().use(compression()).use(handle).listen(port))
|
|
||||||
|
|
@ -1,99 +0,0 @@
|
||||||
body, html {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------------------------------- */
|
|
||||||
|
|
||||||
header {
|
|
||||||
z-index: 100;
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
top: 20px;
|
|
||||||
left: 0;
|
|
||||||
text-align: center;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header a {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
header a:not(:last-child) {
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header a.active {
|
|
||||||
color: #000;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------------------------------- */
|
|
||||||
|
|
||||||
@keyframes animateIn {
|
|
||||||
from {
|
|
||||||
transform: translate3d(100vw, 0, 0);;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes animateOut {
|
|
||||||
to {
|
|
||||||
transform: translate3d(-100vw, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------------------------------- */
|
|
||||||
|
|
||||||
#container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
box-shadow: inset 0 0 0 20px;
|
|
||||||
background: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container.page-about {
|
|
||||||
background: tan;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container.page-contact {
|
|
||||||
background: violet;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container h1 {
|
|
||||||
font-size: 10vw;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container[class*="animate-"] {
|
|
||||||
position: fixed;
|
|
||||||
animation: animateIn .75s ease-in-out forwards;
|
|
||||||
transform-origin: center;
|
|
||||||
will-change: transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container.animate-out {
|
|
||||||
animation-name: animateOut;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading #container:not(.clone) h1 {
|
|
||||||
opacity: 0;
|
|
||||||
animation: fadeIn 1s .15s ease-in-out forwards;
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue