make scrollBehavior work with transitions by handling a promise

homerjam · homerjam · commit 62d9c416a9bd · 2017-09-22T17:05:02.000+01:00
diff --git a/examples/scroll-behavior/app.js b/examples/scroll-behavior/app.js
@@ -20,12 +20,13 @@ const Bar = {
 // - only available in html5 history mode
 // - defaults to no scroll behavior
 // - return false to prevent scroll
-const scrollBehavior = (to, from, savedPosition) => {
+const scrollBehavior = async function (to, from, savedPosition) {
   if (savedPosition) {
     // savedPosition is only available for popstate navigations.
     return savedPosition
   } else {
     const position = {}
+    let delay = 500
     // new navigation.
     // scroll to anchor by returning the selector
     if (to.hash) {
@@ -35,14 +36,20 @@ const scrollBehavior = (to, from, savedPosition) => {
       if (to.hash === '#anchor2') {
         position.offset = { y: 100 }
       }
+
+      if (document.querySelector(to.hash)) {
+        delay = 0
+      }
     }
     // check if any matched route config has meta that requires scrolling to top
     if (to.matched.some(m => m.meta.scrollToTop)) {
-      // cords will be used if no selector is provided,
+      // coords will be used if no selector is provided,
       // or if the selector didn't match any element.
       position.x = 0
       position.y = 0
     }
+    // wait for the out transition to complete (if necessary)
+    await (new Promise(resolve => setTimeout(resolve, delay)))
     // if the returned position is falsy or an empty object,
     // will retain current scroll position.
     return position
@@ -72,7 +79,9 @@ new Vue({
         <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
         <li><router-link to="/bar#anchor2">/bar#anchor2</router-link></li>
       </ul>
-      <router-view class="view"></router-view>
+      <transition name="fade" mode="out-in">
+        <router-view class="view"></router-view>
+      </transition>
     </div>
   `
 }).$mount('#app')
diff --git a/examples/scroll-behavior/index.html b/examples/scroll-behavior/index.html
@@ -1,6 +1,12 @@
 <!DOCTYPE html>
 <link rel="stylesheet" href="/global.css">
 <style>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s ease;
+}
+.fade-enter, .fade-leave-active {
+  opacity: 0
+}
 .view {
   border: 1px solid red;
   height: 2000px;
diff --git a/src/util/scroll.js b/src/util/scroll.js
@@ -36,28 +36,16 @@ export function handleScroll (
 
   // wait until re-render finishes before scrolling
   router.app.$nextTick(() => {
-    let position = getScrollPosition()
+    const position = getScrollPosition()
     const shouldScroll = behavior(to, from, isPop ? position : null)
+
     if (!shouldScroll) {
       return
     }
-    const isObject = typeof shouldScroll === 'object'
-    if (isObject && typeof shouldScroll.selector === 'string') {
-      const el = document.querySelector(shouldScroll.selector)
-      if (el) {
-        let offset = shouldScroll.offset && typeof shouldScroll.offset === 'object' ? shouldScroll.offset : {}
-        offset = normalizeOffset(offset)
-        position = getElementPosition(el, offset)
-      } else if (isValidPosition(shouldScroll)) {
-        position = normalizePosition(shouldScroll)
-      }
-    } else if (isObject && isValidPosition(shouldScroll)) {
-      position = normalizePosition(shouldScroll)
-    }
 
-    if (position) {
-      window.scrollTo(position.x, position.y)
-    }
+    Promise.resolve(shouldScroll).then((shouldScroll) => {
+      scrollToPosition(shouldScroll, position)
+    })
   })
 }
 
@@ -109,3 +97,23 @@ function normalizeOffset (obj: Object): Object {
 function isNumber (v: any): boolean {
   return typeof v === 'number'
 }
+
+function scrollToPosition (shouldScroll, position) {
+  const isObject = typeof shouldScroll === 'object'
+  if (isObject && typeof shouldScroll.selector === 'string') {
+    const el = document.querySelector(shouldScroll.selector)
+    if (el) {
+      let offset = shouldScroll.offset && typeof shouldScroll.offset === 'object' ? shouldScroll.offset : {}
+      offset = normalizeOffset(offset)
+      position = getElementPosition(el, offset)
+    } else if (isValidPosition(shouldScroll)) {
+      position = normalizePosition(shouldScroll)
+    }
+  } else if (isObject && isValidPosition(shouldScroll)) {
+    position = normalizePosition(shouldScroll)
+  }
+
+  if (position) {
+    window.scrollTo(position.x, position.y)
+  }
+}
