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)
|
||||
|
||||
# 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.
|
||||
This example has been deprecated and removed in favor of https://github.com/zeit/next.js/tree/canary/examples/with-next-page-transitions
|
||||
|
|
|
|||
|
|
@ -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