Update example with dynamic transition

examples/routes-transitions/assets/main.css

@@ -1,7 +1,12 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
 .container {
   text-align: center;
   padding-top: 200px;
   font-size: 20px;
+  transition: all .5s cubic-bezier(.55,0,.1,1);
 }
 
 .page-enter-active, .page-leave-active {
@@ -27,3 +32,14 @@
   50% { transform: scale(1.5) }
   100% { transform: scale(0) }
 }
+
+.slide-left-enter,
+.slide-right-leave-active {
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+.slide-left-leave-active,
+.slide-right-enter {
+  opacity: 0;
+  transform: translate(-30px, 0);
+}

examples/routes-transitions/nuxt.config.js

@@ -1,5 +1,7 @@
 module.exports = {
-  css: [
-    'assets/main.css'
-  ]
+  build: {
+    vendor: ['axios']
+  },
+  css: ['assets/main.css'],
+  loading: false
 }

examples/routes-transitions/package.json

@@ -2,14 +2,12 @@
   "name": "routes-transition",
   "description": "",
   "dependencies": {
+    "axios": "^0.15.3",
     "nuxt": "latest"
   },
   "scripts": {
-    "start": "../../bin/nuxt"
-  },
-  "config": {
-    "nuxt": {
-      "port": 4000
-    }
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
   }
 }

examples/routes-transitions/pages/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="container">
     <h1>Home page</h1>
-    <nuxt-link to="/about">About page</nuxt-link>
+    <p><nuxt-link to="/about">About page</nuxt-link></p>
+    <p><nuxt-link to="/users">Lists of users</nuxt-link></p>
   </div>
 </template>

examples/routes-transitions/pages/users.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="container" :key="page">
+    <nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">&lt; Prev</nuxt-link>
+    <a v-else class="disabled">&lt; Prev</a>
+    <span>{{ page }}/{{ totalPages }}</span>
+    <nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
+    <a v-else class="disabled">Next &gt;</a>
+    <ul>
+      <li v-for="user in users">
+        <img :src="user.avatar" class="avatar" />
+        <span>{{ user.first_name }} {{ user.last_name }}</span>
+      </li>
+    </ul>
+    <p><nuxt-link to="/">Back home</nuxt-link></p>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  transition (to, from) {
+    if (!from) return 'slide-left'
+    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
+  },
+  data ({ query }) {
+    const page = +query.page || 1
+    return axios.get('http://reqres.in/api/users?page=' + page)
+    .then((res) => {
+      return {
+        page: +res.data.page,
+        totalPages: res.data.total_pages,
+        users: res.data.data
+      }
+    })
+  }
+}
+</script>
+
+<style scoped>
+a {
+  display: inline-block;
+  margin: 0 1em;
+  color: #34495e;
+  text-decoration: none;
+}
+a.disabled {
+  color: #ccc;
+}
+ul {
+  margin: auto;
+  padding: 0;
+  width: 400px;
+  padding-top: 40px;
+}
+li {
+  list-style-type: none;
+  width: 400px;
+  border: 1px #ddd solid;
+  overflow: hidden;
+}
+li img {
+  float: left;
+  width: 100px;
+  height: 100px;
+}
+li span {
+  display: inline-block;
+  padding-top: 40px;
+  text-transform: uppercase;
+}
+</style>