├── static
    ├── favicon.ico
    └── README.md
├── middleware
    ├── pages.js
    └── README.md
├── pages
    ├── index.vue
    ├── about.vue
    └── users.vue
├── .editorconfig
├── layouts
    ├── README.md
    └── default.vue
├── assets
    └── README.md
├── store
    └── index.js
├── plugins
    └── README.md
├── .eslintrc.js
├── nuxt.config.js
├── package.json
├── LICENSE
├── README.md
├── .gitignore
└── components
    └── AppNavigation.vue


/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sdras/page-transitions-simple/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/middleware/pages.js:
--------------------------------------------------------------------------------
1 | export default function(context) {
2 |   // go tell the store to update the page
3 |   context.store.commit('updatePage', context.route.name)
4 | }
5 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
1 | /pages/index.vue
2 | <template>
3 |   <div class="container">
4 |     <h1>Home page</h1>
5 |     <p><nuxt-link to="/about">About page</nuxt-link></p>
6 |     <p><nuxt-link to="/users">Lists of users</nuxt-link></p>
7 |   </div>
8 | </template>


--------------------------------------------------------------------------------
/pages/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <h1>About page</h1>
 4 |     <nuxt-link to="/">Home page</nuxt-link>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // export default {
10 | //   transition: 'bounce'
11 | // }
12 | </script>


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | This directory contains your Application Layouts.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/views#layouts
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/assets#webpacked
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vuex from 'vuex'
 2 | 
 3 | const createStore = () => {
 4 |   return new Vuex.Store({
 5 |     state: {
 6 |       page: 'index'
 7 |     },
 8 |     mutations: {
 9 |       updatePage(state, pageName) {
10 |         state.page = pageName
11 |       }
12 |     }
13 |   })
14 | }
15 | 
16 | export default createStore
17 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/plugins
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | This directory contains your static files.
 4 | Each file inside this directory is mapped to /.
 5 | 
 6 | Example: /static/robots.txt is mapped as /robots.txt.
 7 | 
 8 | More information about the usage of this directory in the documentation:
 9 | https://nuxtjs.org/guide/assets#static
10 | 
11 | **This directory is not required, you can delete it if you don't want to use it.**
12 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
 1 | # MIDDLEWARE
 2 | 
 3 | This directory contains your Application Middleware.
 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
 5 | 
 6 | More information about the usage of this directory in the documentation:
 7 | https://nuxtjs.org/guide/routing#middleware
 8 | 
 9 | **This directory is not required, you can delete it if you don't want to use it.**
10 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 |     'plugin:vue/essential'
14 |   ],
15 |   // required to lint *.vue files
16 |   plugins: [
17 |     'vue'
18 |   ],
19 |   // add your custom rules here
20 |   rules: {}
21 | }
22 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   /*
 3 |   ** Headers of the page
 4 |   */
 5 |   head: {
 6 |     title: 'page-transition',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', name: 'description', content: 'Nuxt.js project' }
11 |     ],
12 |     link: [
13 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
14 |       {
15 |         rel: 'stylesheet',
16 |         href: 'https://fonts.googleapis.com/css?family=Lora'
17 |       }
18 |     ]
19 |   },
20 |   router: {
21 |     middleware: 'pages'
22 |   },
23 |   /*
24 |   ** Customize the progress bar color
25 |   */
26 |   loading: { color: '#3B8070' },
27 |   /*
28 |   ** Build configuration
29 |   */
30 |   build: {}
31 | }
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "page-transition",
 3 |   "version": "1.0.0",
 4 |   "description": "Nuxt.js project",
 5 |   "author": "sdras <sarah.drasner@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13 |     "precommit": "npm run lint"
14 |   },
15 |   "dependencies": {
16 |     "axios": "^0.18.0",
17 |     "node-sass": "^4.8.3",
18 |     "nuxt": "^1.0.0",
19 |     "sass-loader": "^6.0.7",
20 |     "style-loader": "^0.20.3",
21 |     "vuex": "^3.0.1"
22 |   },
23 |   "devDependencies": {
24 |     "babel-eslint": "^8.2.1",
25 |     "eslint": "^4.15.0",
26 |     "eslint-friendly-formatter": "^3.0.0",
27 |     "eslint-loader": "^1.7.1",
28 |     "eslint-plugin-vue": "^4.0.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Sarah Drasner
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Simple Page Transitions Demo
 2 | 
 3 | This small demo shows an extremely simple implmentation of native-like page transitions on the web (you can think of it like a reduced case for the page-transitions-travelapp). This is created with Nuxt and Vue.
 4 | 
 5 | Article explaining the demo is available at
 6 | [https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web](https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web)
 7 | 
 8 | Live demo at
 9 | [https://page-transitions.com/](https://page-transitions.com/)
10 | 
11 | ![Vue stripe sample shop](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/simple-transition.gif 'Simple Page Transitions Demo')
12 | 
13 | See the page transitions travel app demo for a real-life use case: [https://github.com/sdras/page-transitions-travelapp](https://github.com/sdras/page-transitions-travelapp)
14 | 
15 | ## Build Setup
16 | 
17 | ```bash
18 | # install dependencies
19 | $ npm install # Or yarn install
20 | 
21 | # serve with hot reload at localhost:3000
22 | $ npm run dev
23 | 
24 | # build for production and launch server
25 | $ npm run build
26 | $ npm start
27 | 
28 | # generate static project
29 | $ npm run generate
30 | ```
31 | 
32 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
33 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | ### OSX ###
 2 | *.DS_Store
 3 | .AppleDouble
 4 | .LSOverride
 5 | 
 6 | # Icon must end with two 
 7 | Icon
 8 | # Thumbnails
 9 | ._*
10 | # Files that might appear in the root of a volume
11 | .DocumentRevisions-V100
12 | .fseventsd
13 | .Spotlight-V100
14 | .TemporaryItems
15 | .Trashes
16 | .VolumeIcon.icns
17 | .com.apple.timemachine.donotpresent
18 | # Directories potentially created on remote AFP share
19 | .AppleDB
20 | .AppleDesktop
21 | Network Trash Folder
22 | Temporary Items
23 | .apdisk
24 | 
25 | ### Node ###
26 | # Logs
27 | logs
28 | *.log
29 | npm-debug.log*
30 | 
31 | # Runtime data
32 | pids
33 | *.pid
34 | *.seed
35 | *.pid.lock
36 | 
37 | # Directory for instrumented libs generated by jscoverage/JSCover
38 | lib-cov
39 | 
40 | # Coverage directory used by tools like istanbul
41 | coverage
42 | 
43 | # nyc test coverage
44 | .nyc_output
45 | 
46 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
47 | .grunt
48 | 
49 | # node-waf configuration
50 | .lock-wscript
51 | 
52 | # Compiled binary addons (http://nodejs.org/api/addons.html)
53 | build/Release
54 | 
55 | # Dependency directories
56 | node_modules
57 | jspm_packages
58 | 
59 | # Optional npm cache directory
60 | .npm
61 | 
62 | # Optional eslint cache
63 | .eslintcache
64 | 
65 | # Optional REPL history
66 | .node_repl_history
67 | 
68 | # Output of 'npm pack'
69 | *.tgz
70 | 
71 | # Yarn Integrity file
72 | .yarn-integrity
73 | 
74 | # Nuxt build
75 | .nuxt
76 | 
77 | # Nuxt generate
78 | dist


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <app-navigation />
 4 |     <nuxt/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import AppNavigation from '~/components/AppNavigation.vue'
10 | 
11 | export default {
12 |   components: {
13 |     AppNavigation
14 |   }
15 | }
16 | </script>
17 | 
18 | 
19 | <style>
20 | body {
21 |   background: #1d3557;
22 |   color: white;
23 |   font-family: 'Lora', serif;
24 |   margin: 20px;
25 | }
26 | 
27 | html {
28 |   font-size: 16px;
29 |   word-spacing: 1px;
30 |   -ms-text-size-adjust: 100%;
31 |   -webkit-text-size-adjust: 100%;
32 |   -moz-osx-font-smoothing: grayscale;
33 |   -webkit-font-smoothing: antialiased;
34 |   box-sizing: border-box;
35 | }
36 | 
37 | *,
38 | *:before,
39 | *:after {
40 |   box-sizing: border-box;
41 |   margin: 0;
42 | }
43 | 
44 | a,
45 | a:visited,
46 | a:active {
47 |   color: white;
48 |   text-decoration: none;
49 | }
50 | 
51 | button {
52 |   margin-bottom: 10px;
53 |   background: #43aa8b;
54 |   border: 0;
55 |   cursor: pointer;
56 |   padding: 6px 8px;
57 |   font-size: 13px;
58 | }
59 | 
60 | .container {
61 |   text-align: center;
62 |   font-size: 20px;
63 |   transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
64 | }
65 | 
66 | .page-enter-active {
67 |   transition: opacity 0.25s ease-out;
68 | }
69 | 
70 | .page-leave-active {
71 |   transition: opacity 0.25s ease-in;
72 | }
73 | 
74 | .page-enter,
75 | .page-leave-active {
76 |   opacity: 0;
77 | }
78 | 
79 | .slide-left-enter,
80 | .slide-right-leave-active {
81 |   opacity: 0;
82 |   transform: translate(20px, 0);
83 | }
84 | 
85 | .slide-left-leave-active,
86 | .slide-right-enter {
87 |   opacity: 0;
88 |   transform: translate(-20px, 0);
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/pages/users.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">&lt; Prev</nuxt-link>
 4 |     <a v-else class="disabled">&lt; Prev</a>
 5 |     <span>{{ page }}/{{ totalPages }}</span>
 6 |     <nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
 7 |     <a v-else class="disabled">Next &gt;</a>
 8 |     <ul>
 9 |       <li v-for="user in users" :key="user.id">
10 |         <img :src="user.avatar" class="avatar" />
11 |         <span>{{ user.first_name }} {{ user.last_name }}</span>
12 |       </li>
13 |     </ul>
14 |     <p><nuxt-link to="/">Back home</nuxt-link></p>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import axios from 'axios'
20 | 
21 | export default {
22 |   // Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
23 |   watchQuery: ['page'],
24 |   // Key for <nuxt-child> (transitions)
25 |   key: to => to.fullPath,
26 |   // Called to know which transition to apply
27 |   transition(to, from) {
28 |     if (!from) return 'slide-left'
29 |     return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
30 |   },
31 |   async asyncData({ query }) {
32 |     const page = +query.page || 1
33 |     const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
34 |     return {
35 |       page: +data.page,
36 |       totalPages: data.total_pages,
37 |       users: data.data
38 |     }
39 |   }
40 | }
41 | </script>
42 | 
43 | <style scoped>
44 | a {
45 |   display: inline-block;
46 |   margin: 0 1em;
47 |   color: #34495e;
48 |   text-decoration: none;
49 | }
50 | a.disabled {
51 |   color: #ccc;
52 | }
53 | ul {
54 |   margin: auto;
55 |   padding: 0;
56 |   width: 100%;
57 |   max-width: 400px;
58 |   padding-top: 40px;
59 | }
60 | li {
61 |   list-style-type: none;
62 |   width: 400px;
63 |   border: 1px #ddd solid;
64 |   overflow: hidden;
65 | }
66 | li img {
67 |   float: left;
68 |   width: 100px;
69 |   height: 100px;
70 | }
71 | li span {
72 |   display: inline-block;
73 |   padding-top: 40px;
74 |   text-transform: uppercase;
75 | }
76 | </style>


--------------------------------------------------------------------------------
/components/AppNavigation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav>
 3 |     <h2>Simple Transition Group For Layout: {{ page }}</h2>
 4 |     <ul>
 5 |       <nuxt-link exact to="/"><li>index</li></nuxt-link>
 6 |       <nuxt-link to="/about"><li>about</li></nuxt-link>
 7 |       <nuxt-link to="/users"><li>users</li></nuxt-link>
 8 |     </ul>
 9 |     <br>
10 |     <svg :class="{ 'active' : (page === 'about') }" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 447 442">
11 |       <transition-group name="list" tag="g">
12 |         <rect class="items rect" ref="rect" key="rect" width="171" height="171"/>
13 |         <circle class="items circ" key="circ" id="profile" cx="382" cy="203" r="65"/>
14 |         <g class="items text" id="text" key="text">
15 |           <rect x="56" y="225" width="226" height="16"/>
16 |           <rect x="56" y="252" width="226" height="16"/>
17 |           <rect x="56" y="280" width="226" height="16"/>
18 |         </g>
19 |         <rect class="items footer" key="footer" id="footer" y="423" width="155" height="19" rx="9.5" ry="9.5"/>
20 |       </transition-group>
21 |     </svg>
22 |   </nav>
23 | </template>
24 | 
25 | <script>
26 | import { mapState } from 'vuex'
27 | 
28 | export default {
29 |   computed: mapState(['page'])
30 | }
31 | </script>
32 | 
33 | <style scoped lang="scss">
34 | ul {
35 |   list-style: none;
36 |   li {
37 |     display: inline-block;
38 |     margin-right: 10px;
39 |   }
40 |   a,
41 |   a:active,
42 |   a:visited {
43 |     color: white;
44 |     text-decoration: none;
45 |   }
46 | }
47 | 
48 | .nuxt-link-active {
49 |   font-weight: bold;
50 | }
51 | 
52 | .items,
53 | .list-move {
54 |   transition: all 0.4s ease;
55 | }
56 | 
57 | .list-leave-active {
58 |   position: absolute;
59 | }
60 | 
61 | #text {
62 |   transform-origin: 50% 50%;
63 | }
64 | 
65 | svg {
66 |   fill: #a8dadc;
67 | }
68 | 
69 | .active {
70 |   fill: #e63946;
71 |   .rect {
72 |     transform: translate3d(0, 30px, 0);
73 |   }
74 |   .circ {
75 |     transform: translate3d(30px, 0, 0) scale(0.5);
76 |   }
77 |   .text {
78 |     transform: rotate(90deg) scaleX(0.08) translate3d(-300px, -35px, 0);
79 |   }
80 |   .footer {
81 |     transform: translate3d(100px, 0, 0);
82 |   }
83 | }
84 | </style>


--------------------------------------------------------------------------------