feat: <transition> support

Author: Zippowxk

demo/package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "vue-router-keep-alive-helper": "^0.0.28"
   },
   "devDependencies": {
     "@vue/cli-plugin-router": "~4.5.13",

demo/src/App.vue

@@ -1,22 +1,50 @@
 <template>
   <div id="app">
-    <!-- <transition name="slide-left" > -->
+    <transition :name="slideName">
       <keep-alive>
         <router-view/>
       </keep-alive>
-    <!-- </transition> -->
+    </transition>
   </div>
 </template>
+<script>
+import createHelper from '../../dist/index.js'
+export default {
+  data() {
+    return {
+      slideName: ''
+    }
+  },
+  watch: {
+    $route(to, from) {
+      const helper = createHelper()
+      helper.setTransitionNameHandler(()=>{
+        return this.slideName
+      })
+      if (helper.isBacking) {
+        this.slideName = "slide-right";
+      } else {
+        this.slideName = "slide-left";
+      }
+    },
+  },
+}
+</script>
 
 <style>
+* {
+  margin :0;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
 }
-
+#app div{
+  background-color: #fff;
+}
 #nav {
   padding: 30px;
 }
@@ -48,7 +76,7 @@
   z-index: 99;
 }
 
-.slide-right-enter-from {
+.slide-right-enter {
   z-index: 1;
   transform: translate3d(-100%, 0, 0);
 }
@@ -58,7 +86,7 @@
   transform: translate3d(100%, 0, 0);
 }
 
-.slide-left-enter-from {
+.slide-left-enter {
   transform: translate3d(100%, 0, 0);
 }
 

demo/src/main.js

@@ -1,10 +1,12 @@
 import Vue from '../../debug/vue.js'
+// import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 
 Vue.config.productionTip = false
 
-new Vue({
+const app = new Vue({
   router,
   render: function (h) { return h(App) }
-}).$mount('#app')
+})
+router.onReady(() => app.$mount('#app'))

demo/src/router/index.js

@@ -1,4 +1,5 @@
 import Vue from '../../../debug/vue.js'
+// import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 
@@ -39,6 +40,7 @@ const router = new VueRouter({
 })
 
 import createHelper from '../../../dist/index.js'
+// import createHelper from 'vue-router-keep-alive-helper'
 createHelper({Vue, router});
 
 export default router

demo/src/views/Home.vue

@@ -15,7 +15,7 @@ export default {
     HelloWorld
   },
   beforeCreate() {
-    debugger
+    // debugger
     console.log('home before create');
   },
   methods: {

demo/src/views/Info.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="about">
+  <div class="Info">
     <h1>This is an Info page</h1>
   </div>
 </template>

demo/yarn.lock

@@ -6515,6 +6515,11 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router-keep-alive-helper@^0.0.28:
+  version "0.0.28"
+  resolved "https://registry.npmmirror.com/vue-router-keep-alive-helper/-/vue-router-keep-alive-helper-0.0.28.tgz#2651f55bf1fe27bf5dfbe05ea3c72337ba82ec8e"
+  integrity sha512-5U+19Zb0wXh6NyU5dYnAmiT8HP1b5WZjhK+rirg+6WUJPlx4HgQm7La3oEpSFPrr5BL1xJDv+v2Je5N8nNUHdA==
+
 vue-router@^3.2.0:
   version "3.6.5"
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"