feat: Add router transitions (nativescript-vue#86)

rigor789 · web-flow · commit 381843ede824 · 2017-11-24T15:15:17.000+01:00
* WIP: add router transitions

* Add page transitions
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
   "dependencies": {
     "he": "^1.1.1",
     "lint-staged": "^4.2.3",
-    "vue": "^2.5.2"
+    "vue": "^2.5.6"
   },
   "peerDependencies": {
     "tns-core-modules": "^3.0.0"
diff --git a/platform/nativescript/plugins/navigator-plugin.js b/platform/nativescript/plugins/navigator-plugin.js
@@ -2,7 +2,6 @@ import { isPage } from '../util/index'
 import { Page } from 'ui/page'
 import { topmost } from 'ui/frame'
 import { start } from 'application'
-import application from 'application'
 import { VUE_VM_REF } from '../runtime/index'
 import { after } from '../util'
 
diff --git a/platform/nativescript/plugins/router-plugin.js b/platform/nativescript/plugins/router-plugin.js
@@ -17,6 +17,19 @@ export function patchRouter(router, Vue) {
   router.isBackNavigation = false
   router.shouldNavigate = true
   router.pageStack = []
+  router.pageTransition = null
+
+  router.setPageTransition = (transition, duration, curve) => {
+    if (typeof transition === 'string') {
+      return (router.pageTransition = {
+        name: transition,
+        duration,
+        curve
+      })
+    }
+
+    router.pageTransition = transition
+  }
 
   router._beginBackNavigation = (shouldNavigate = true) => {
     if (router.isBackNavigation) {
@@ -68,7 +81,9 @@ export function patchRouter(router, Vue) {
     const component = router.getMatchedComponents()[0]
 
     Vue.navigateTo(component, {
-      context: { router }
+      context: { router },
+      transition: router.pageTransition
+      // Todo: add transitionAndroid and transitionIOS
     }).then(page => {
       router.pageStack.push(page)
 
diff --git a/samples/app/app-with-router-pages.js b/samples/app/app-with-router-pages.js
@@ -55,5 +55,8 @@ router.replace('/foo')
 
 new Vue({
   router,
-  template: `<router-page />`
+  template: `<router-page />`,
+  created() {
+    // this.$setPageTransition('slide', 1000)
+  }
 }).$start()
