update(example): add cube-view

example/App.vue

@@ -12,14 +12,14 @@
         </li>
       </ul>
     </section>
-    <transition name="move">
-      <router-view class="cube-view"></router-view>
-    </transition>
+    <cube-view></cube-view>
   </div>
 </template>
 
 <script type="text/ecmascript-6">
   import BScroll from 'better-scroll'
+  import CubeView from './components/cube-view.vue'
+
   export default {
     data() {
       return {
@@ -90,6 +90,9 @@
           click: true
         })
       })
+    },
+    components: {
+      CubeView
     }
   }
 </script>
@@ -137,11 +140,4 @@
             right: 0
             padding: 0 5px
             color: #ccc
-
-  .cube-view
-    transition: all 0.3s
-    transform: translate3d(0, 0, 0)
-    &.move-enter-active, &.move-leave-active
-      transform: translate3d(100%, 0, 0)
-
 </style>

example/components/cube-page.vue

@@ -47,7 +47,7 @@
 
   .cube-page
     position: fixed
-    z-index: 20
+    z-index: 10
     top: 0
     left: 0
     width: 100%
@@ -62,7 +62,7 @@
       box-shadow: 0 1px 6px #ccc
       -webkit-backface-visibility: hidden
       backface-visibility: hidden
-      z-index: 99
+      z-index: 5
       h1
         font-size: 16px
         font-weight: 700

example/components/cube-view.vue

+<template>
+  <transition name="page-move">
+    <router-view class="cube-view"></router-view>
+  </transition>
+</template>
+
+<script type="text/ecmascript-6">
+  export default {}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  .cube-view
+    transform: translate3d(0, 0, 0)
+  .page-move-enter, .page-move-leave-active
+    transform: translate3d(100%, 0, 0)
+  .page-move-enter-active, .page-move-leave-active
+    transition: transform .3s
+</style>