diff --git a/examples/page-transitions/README.md b/examples/page-transitions/README.md index b371d5c8..65908dd9 100644 --- a/examples/page-transitions/README.md +++ b/examples/page-transitions/README.md @@ -1,44 +1 @@ -[![Deploy to now](https://deploy.now.sh/static/button.svg)](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 diff --git a/examples/page-transitions/package.json b/examples/page-transitions/package.json deleted file mode 100644 index 6aa7173f..00000000 --- a/examples/page-transitions/package.json +++ /dev/null @@ -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" -} diff --git a/examples/page-transitions/pages/_document.js b/examples/page-transitions/pages/_document.js deleted file mode 100644 index 40c3fda1..00000000 --- a/examples/page-transitions/pages/_document.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import Document, { Head, Main, NextScript } from 'next/document' - -// --------------------------------------------- - -export default class CustomDocument extends Document { - render () { - return ( - - - - - - - -
- - - ) - } -} diff --git a/examples/page-transitions/pages/index.js b/examples/page-transitions/pages/index.js deleted file mode 100644 index 45d6b75b..00000000 --- a/examples/page-transitions/pages/index.js +++ /dev/null @@ -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
- } -} diff --git a/examples/page-transitions/pages/main.js b/examples/page-transitions/pages/main.js deleted file mode 100644 index 5b30b32c..00000000 --- a/examples/page-transitions/pages/main.js +++ /dev/null @@ -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 (
- - {this.props.pathname} - Page Transitions - - -
- - Homepage - - - - About - - - - Contact - -
- -
-

-

-
) - } -} - -Main.propTypes = { - pathname: PropTypes.string.isRequired -} diff --git a/examples/page-transitions/routes.js b/examples/page-transitions/routes.js deleted file mode 100644 index 35d5e4e6..00000000 --- a/examples/page-transitions/routes.js +++ /dev/null @@ -1,6 +0,0 @@ -const nextRoutes = require('next-routes') -const routes = nextRoutes() - -routes.add('main', '/:slug/:child?', '') - -module.exports = routes diff --git a/examples/page-transitions/server.js b/examples/page-transitions/server.js deleted file mode 100644 index a19d95a5..00000000 --- a/examples/page-transitions/server.js +++ /dev/null @@ -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)) diff --git a/examples/page-transitions/static/style.css b/examples/page-transitions/static/style.css deleted file mode 100644 index 78a43520..00000000 --- a/examples/page-transitions/static/style.css +++ /dev/null @@ -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; -}