路由切换页面过度动画

src/App.vue

@@ -1,19 +1,47 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/">About</router-link>
-    </div>
-    <router-view/>
+    <transition :name="transitionName">
+      <keep-alive v-if="$route.meta.keepAlive">
+        <router-view class="router"></router-view>
+      </keep-alive>
+      <router-view class="router" v-else></router-view>
+    </transition>
   </div>
 </template>
+<script>
+export default {
+  name: 'app',
+  computed: {
+    transitionName () {
+      return this.$store.state.direction
+    }
+  }
+}
+</script>
 
 <style lang="scss">
+@import "style/common.scss";
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
 }
+.router {
+  width: 100%;
+  height: 100%;
+  height: 100vh;
+  overflow: scroll;
+  position: fixed;
+  overflow: hidden !important;
+  overflow-y: auto !important;
+  -webkit-overflow-scrolling: touch;
+  background: #f0f0f0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #f2f2f2;
+}
 </style>

src/main.js

@@ -3,6 +3,7 @@ import 'lib-flexible'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import '@/style/common.scss'
 
 Vue.config.productionTip = false
 

src/router/about.js

@@ -2,6 +2,10 @@ export default [
   {
     path: '/about',
     name: 'about',
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ 'views/About.vue'),
+    meta: {
+      // auth: true,
+      keepAlive: true
+    }
   }
 ]

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from '../views/Home.vue'
+import Home from 'views/Home.vue'
 import store from '@/store'
 
 Vue.use(Router)

src/style/_mixin.scss

@@ -0,0 +1,208 @@
+@mixin center($width: null, $height: null) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    @if not $width and not $height {
+        transform: translate(-50%, -50%);
+    }
+
+    @else if $width and $height {
+        width: $width;
+        height: $height;
+        margin: -($height / 2) #{0 0} -($width / 2);
+    }
+
+    @else if not $height {
+        width: $width;
+        margin-left: -($width / 2);
+        transform: translateY(-50%);
+    }
+
+    @else {
+        height: $height;
+        margin-top: -($height / 2);
+        transform: translateX(-50%);
+    }
+}
+
+
+
+@mixin opacity($opacity) {
+    opacity: $opacity;
+    $opacity-ie: $opacity * 100;
+    filter: alpha(opacity=$opacity-ie);
+}
+
+@mixin ell() {
+    //
+    overflow: hidden;
+    -ms-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+//多行超出省略号
+@mixin ell2() {
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+
+//.arrow{
+// @include arrow(bottom,10px,#F00);
+//
+@mixin arrow($direction, $size, $color) {
+    width: 0;
+    height: 0;
+    line-height: 0;
+    font-size: 0;
+    overflow: hidden;
+    border-width: $size;
+    cursor: pointer;
+
+    @if $direction==top {
+        border-style: dashed dashed solid dashed;
+        border-color: transparent transparent $color transparent;
+        border-top: none;
+    }
+
+    @else if $direction==bottom {
+        border-style: solid dashed dashed dashed;
+        border-color: $color transparent transparent transparent;
+        border-bottom: none;
+    }
+
+    @else if $direction==right {
+        border-style: dashed dashed dashed solid;
+        border-color: transparent transparent transparent $color;
+        border-right: none;
+    }
+
+    @else if $direction==left {
+        border-style: dashed solid dashed dashed;
+        border-color: transparent $color transparent transparent;
+        border-left: none;
+    }
+}
+
+// clearfix 
+@mixin clr {
+    &:after {
+        clear: both;
+        content: '.';
+        display: block;
+        height: 0;
+        line-height: 0;
+        overflow: hidden;
+    }
+
+    *height: 1%;
+}
+
+/*渐变(从上到下）*/
+@mixin linear-gradient($direction:bottom, $color1:transparent, $color2:#306eff, $color3:transparent) {
+    //background: -webkit-linear-gradient($direction,$colorTop, $colorCenter, $colorBottom); /* Safari 5.1 - 6.0 */
+    background: -o-linear-gradient($direction, $color1, $color2, $color3);
+    /* Opera 11.1 - 12.0 */
+    background: -moz-linear-gradient($direction, $color1, $color2, $color3);
+    /* Firefox 3.6 - 15 */
+    background: linear-gradient(to $direction, $color1, $color2, $color3);
+    /* 标准的语法 */
+
+}
+
+/* 行高 */
+@mixin line-height($height:30px, $line-height:30px) {
+    @if ($height !=null) {
+        height: $height;
+    }
+
+    @if ($line-height !=null) {
+        line-height: $line-height;
+    }
+}
+
+/* 定义滚动条样式 圆角和阴影不需要则传入null */
+@mixin scrollBar($width:10px, $height:10px, $outColor:$bgColor, $innerColor:$bgGrey, $radius:5px, $shadow:null) {
+
+    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+    &::-webkit-scrollbar {
+        width: $width;
+        height: $height;
+        background-color: $outColor;
+    }
+
+    /*定义滚动条轨道 内阴影+圆角*/
+    &::-webkit-scrollbar-track {
+        @if ($shadow !=null) {
+            -webkit-box-shadow: $shadow;
+        }
+
+        @if ($radius !=null) {
+            border-radius: $radius;
+        }
+
+        background-color: $outColor;
+    }
+
+    /*定义滑块 内阴影+圆角*/
+    &::-webkit-scrollbar-thumb {
+        @if ($shadow !=null) {
+            -webkit-box-shadow: $shadow;
+        }
+
+        @if ($radius !=null) {
+            border-radius: $radius;
+        }
+
+        background-color: $innerColor;
+        border: 1px solid $innerColor;
+    }
+}
+
+/* css3动画 默认3s宽度到200px */
+@mixin animation($from:(width:0px), $to:(width:200px), $name:mymove, $animate:mymove 2s 1 linear infinite) {
+    -webkit-animation: $animate;
+    -o-animation: $animate;
+    animation: $animate;
+
+    @keyframes #{$name} {
+        from {
+
+            @each $key,
+            $value in $from {
+                #{$key}: #{$value};
+            }
+        }
+
+        to {
+
+            @each $key,
+            $value in $to {
+                #{$key}: #{$value};
+            }
+        }
+    }
+
+    @-webkit-keyframes #{$name} {
+        from {
+
+            @each $key,
+            $value in $from {
+                $key: $value;
+            }
+        }
+
+        to {
+
+            @each $key,
+            $value in $to {
+                $key: $value;
+            }
+        }
+    }
+}

src/style/_variables.scss

@@ -0,0 +1 @@
+$color-main:red;

src/style/common.scss

@@ -0,0 +1,73 @@
+html, body {
+    width: 100%;
+    overflow-x: hidden;
+}
+
+.clearfix:after {
+  display: block;
+  clear: both;
+  content: "";
+  visibility: hidden;
+  height: 0;
+}
+input,
+button,
+select,
+textarea {
+  outline: none;
+}
+
+/* page change */
+$--transition-time: 350ms;
+.back-enter-active,
+.back-leave-active,
+.forward-enter-active,
+.forward-leave-active {
+  will-change: transform;
+  transition: all $--transition-time;
+  position: absolute;
+  height: 100%;
+  backface-visibility: hidden;
+  perspective: 1000;
+}
+.back-enter {
+  opacity: 0.75;
+  transform: translate3d(-35%, 0, 0) !important;
+}
+.back-enter-active {
+  z-index: -1 !important;
+  transition: all $--transition-time linear;
+}
+.back-leave-active {
+  transform: translate3d(100%, 0, 0) !important;
+  transition: all $--transition-time linear;
+}
+.forward-enter {
+  transform: translate3d(100%, 0, 0) !important;
+}
+.forward-enter-active {
+  transition: all $--transition-time linear;
+}
+.forward-leave-active {
+  z-index: -1;
+  opacity: 0.65;
+  transform: translate3d(-35%, 0, 0) !important;
+  transition: all $--transition-time linear;
+}
+
+.slide-left-leave-active,
+.slide-right-leave-active,
+.slide-left-enter-active,
+.slide-right-enter-active {
+  transition: all $--transition-time;
+}
+.slide-left-enter,
+.slide-right-leave-active {
+  -webkit-transform: translate(100%, 0);
+  transform: translate(100%, 0);
+}
+.slide-left-leave-active,
+.slide-right-enter {
+  -webkit-transform: translate(-100%, 0);
+  transform: translate(-100%, 0);
+}

src/views/About.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <router-link to="/">go home</router-link>
   </div>
 </template>
 <script>

src/views/Home.vue

@@ -6,6 +6,7 @@
     <van-button type="primary" @click="addOne">主要按钮</van-button>
     <div class="msg">this is msg 我是消息</div>
     <div class="sq"></div>
+    <router-link to="/about">go about</router-link>
   </div>
 </template>