From 8980b377122705c8024ffb66cf0884a602b68c82 Mon Sep 17 00:00:00 2001 From: James Homer Date: Fri, 19 Jan 2018 13:07:38 +0000 Subject: [PATCH] improve custom scroll behavior example --- .../custom-scroll-behavior/assets/main.css | 20 ++++- .../custom-scroll-behavior/nuxt.config.js | 78 ++++++++----------- examples/custom-scroll-behavior/package.json | 3 +- .../custom-scroll-behavior/pages/about.vue | 11 ++- .../pages/about/contact.vue | 13 ++++ .../pages/about/profile.vue | 12 +++ .../custom-scroll-behavior/pages/index.vue | 3 +- .../custom-scroll-behavior/pages/long.vue | 12 +++ 8 files changed, 101 insertions(+), 51 deletions(-) create mode 100644 examples/custom-scroll-behavior/pages/about/contact.vue create mode 100644 examples/custom-scroll-behavior/pages/about/profile.vue diff --git a/examples/custom-scroll-behavior/assets/main.css b/examples/custom-scroll-behavior/assets/main.css index 1a0d0af818..6045371f79 100644 --- a/examples/custom-scroll-behavior/assets/main.css +++ b/examples/custom-scroll-behavior/assets/main.css @@ -3,12 +3,30 @@ body { } .container { + position: absolute; + top: 0; + left: 0; + width: 100%; text-align: center; - /* padding-top: 200px; */ font-size: 20px; transition: all .5s cubic-bezier(.55,0,.1,1); } +.child { + position: absolute; + top: 200px; + left: 0; + width: 100%; + text-align: center; + font-size: 16px; + transition: all .5s cubic-bezier(.55,0,.1,1); +} + +ul { + list-style: none; + padding: 0; +} + .page-enter-active, .page-leave-active { transition: opacity .5s } diff --git a/examples/custom-scroll-behavior/nuxt.config.js b/examples/custom-scroll-behavior/nuxt.config.js index 460ddc5775..8bb892dad3 100644 --- a/examples/custom-scroll-behavior/nuxt.config.js +++ b/examples/custom-scroll-behavior/nuxt.config.js @@ -1,51 +1,35 @@ -const scrollBehavior = function (to, from, savedPosition, ...args) { - if (savedPosition) { - // savedPosition is only available for popstate navigations. - return savedPosition - } else { - const position = {} +const scrollBehavior = function (to, from, savedPosition) { + // if the returned position is falsy or an empty object, + // will retain current scroll position. + let position = false - // scroll to anchor by returning the selector - if (to.hash) { - position.selector = to.hash - - if (document.querySelector(to.hash)) { - return position - } - - // if the returned position is falsy or an empty object, - // will retain current scroll position. - return false - } - - return new Promise(resolve => { - // check if any matched route config has meta that requires scrolling to top - if (to.matched.some(m => m.meta.scrollToTop)) { - // coords will be used if no selector is provided, - // or if the selector didn't match any element. - position.x = 0 - position.y = 0 - } - - // if no children detected - if (to.matched.length < 2) { - // scroll to the top of the page - position.x = 0 - position.y = 0 - } else if (to.matched.some((r) => r.components.default.options.scrollToTop)) { - // if one of the children has scrollToTop option set to true - position.x = 0 - position.y = 0 - } - - // wait for the out transition to complete (if necessary) - this.app.$root.$once('triggerScroll', () => { - // if the resolved position is falsy or an empty object, - // will retain current scroll position. - resolve(position) - }) - }) + // if no children detected + if (to.matched.length < 2) { + // scroll to the top of the page + position = { x: 0, y: 0 } + } else if (to.matched.some((r) => r.components.default.options.scrollToTop)) { + // if one of the children has scrollToTop option set to true + position = { x: 0, y: 0 } } + + // savedPosition is only available for popstate navigations (back button) + if (savedPosition) { + position = savedPosition + } + + return new Promise(resolve => { + // wait for the out transition to complete (if necessary) + this.app.$root.$once('triggerScroll', () => { + // coords will be used if no selector is provided, + // or if the selector didn't match any element. + if (to.hash && document.querySelector(to.hash)) { + // scroll to anchor by returning the selector + position = { selector: to.hash } + } + + resolve(position) + }) + }) } module.exports = { @@ -54,7 +38,7 @@ module.exports = { }, css: ['~/assets/main.css'], transition: { - afterLeave() { + beforeEnter() { this.$root.$emit('triggerScroll') } }, diff --git a/examples/custom-scroll-behavior/package.json b/examples/custom-scroll-behavior/package.json index c61dd88174..2a869bb622 100644 --- a/examples/custom-scroll-behavior/package.json +++ b/examples/custom-scroll-behavior/package.json @@ -2,7 +2,8 @@ "name": "nuxt-routes-transitions", "dependencies": { "axios": "^0.15.3", - "nuxt": "latest" + "nuxt": "latest", + "vue-router": "https://github.com/homerjam/vue-router#dist" }, "scripts": { "dev": "nuxt", diff --git a/examples/custom-scroll-behavior/pages/about.vue b/examples/custom-scroll-behavior/pages/about.vue index bfeea07ec2..1104c0d814 100644 --- a/examples/custom-scroll-behavior/pages/about.vue +++ b/examples/custom-scroll-behavior/pages/about.vue @@ -1,12 +1,21 @@ diff --git a/examples/custom-scroll-behavior/pages/about/contact.vue b/examples/custom-scroll-behavior/pages/about/contact.vue new file mode 100644 index 0000000000..51306e633c --- /dev/null +++ b/examples/custom-scroll-behavior/pages/about/contact.vue @@ -0,0 +1,13 @@ + + + diff --git a/examples/custom-scroll-behavior/pages/about/profile.vue b/examples/custom-scroll-behavior/pages/about/profile.vue new file mode 100644 index 0000000000..0773fff300 --- /dev/null +++ b/examples/custom-scroll-behavior/pages/about/profile.vue @@ -0,0 +1,12 @@ + + + diff --git a/examples/custom-scroll-behavior/pages/index.vue b/examples/custom-scroll-behavior/pages/index.vue index c29449ef3b..2b2c2c7a03 100644 --- a/examples/custom-scroll-behavior/pages/index.vue +++ b/examples/custom-scroll-behavior/pages/index.vue @@ -4,6 +4,7 @@

About page

Lists of users

Long page

-
+

Long page #anchor

+
diff --git a/examples/custom-scroll-behavior/pages/long.vue b/examples/custom-scroll-behavior/pages/long.vue index 2d4f9f5d40..eb4fd41ef5 100644 --- a/examples/custom-scroll-behavior/pages/long.vue +++ b/examples/custom-scroll-behavior/pages/long.vue @@ -1,6 +1,18 @@