diff --git a/examples/custom-routes/layouts/app.vue b/examples/custom-routes/layouts/app.vue index 9e10a17096..51266bc962 100644 --- a/examples/custom-routes/layouts/app.vue +++ b/examples/custom-routes/layouts/app.vue @@ -95,4 +95,11 @@ a, a:hover text-decoration: none; color: #41B883; } + +.fade-enter-active, .fade-leave-active { + transition: opacity .3s; +} +.fade-enter, .fade-leave-active { + opacity: 0; +} diff --git a/examples/custom-routes/nuxt.config.js b/examples/custom-routes/nuxt.config.js index 5fa4376b1e..56133cacc2 100644 --- a/examples/custom-routes/nuxt.config.js +++ b/examples/custom-routes/nuxt.config.js @@ -10,5 +10,6 @@ module.exports = { '/posts/:slug/:name': [{slug: 'foo', name: 'b'}, {slug: 'bar', name: 'a'}], '/projects/:slug': [{slug: 'toto'}, {slug: 'titi'}, {slug: 'tutu'}] } - } + }, + transition: 'fade' } diff --git a/examples/custom-routes/pages/team/about.vue b/examples/custom-routes/pages/team/about.vue deleted file mode 100644 index a7dcb785bc..0000000000 --- a/examples/custom-routes/pages/team/about.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/examples/custom-routes/pages/users.vue b/examples/custom-routes/pages/users.vue index ce77a3dcbf..be67b73e0a 100644 --- a/examples/custom-routes/pages/users.vue +++ b/examples/custom-routes/pages/users.vue @@ -15,6 +15,7 @@ import axios from 'axios' export default { + transition: 'bounce', data () { return axios.get('https://jsonplaceholder.typicode.com/users') .then((res) => { @@ -45,4 +46,21 @@ export default { .router-link-active { color: #41b883 !important; } +.bounce-enter-active { + animation: bounce-in .8s; +} +.bounce-leave-active { + animation: bounce-out .5s; +} +@keyframes bounce-in { + 0% { transform: scale(0) } + 50% { transform: scale(1.5) } + 100% { transform: scale(1) } +} +@keyframes bounce-out { + 0% { transform: scale(1) } + 50% { transform: scale(1.5) } + 100% { transform: scale(0) } +} + diff --git a/package.json b/package.json index a5bc1d728f..89f8d42a6c 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "vue-server-renderer": "^2.1.3", "vue-template-compiler": "^2.1.3", "vuex": "^2.0.0", - "webpack": "2.2.0-rc.0", + "webpack": "2.2.0-rc", "webpack-dev-middleware": "^1.8.4", "webpack-hot-middleware": "^2.13.2" },