From 1d0c89fe89696fcb5752ba8a5e4ef0165a613f67 Mon Sep 17 00:00:00 2001
From: dolymood <dolymood@gmail.com>
Date: Thu, 14 Dec 2017 11:12:56 +0800
Subject: [PATCH] update(example): add cube-view

---
 example/App.vue                  | 16 ++++++----------
 example/components/cube-page.vue |  4 ++--
 example/components/cube-view.vue | 18 ++++++++++++++++++
 3 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 example/components/cube-view.vue

diff --git a/example/App.vue b/example/App.vue
index 83a6c0b4..26788ed1 100644
--- a/example/App.vue
+++ b/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>
diff --git a/example/components/cube-page.vue b/example/components/cube-page.vue
index 921689d2..9c2c2fc6 100644
--- a/example/components/cube-page.vue
+++ b/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
diff --git a/example/components/cube-view.vue b/example/components/cube-view.vue
new file mode 100644
index 00000000..45c55a26
--- /dev/null
+++ b/example/components/cube-view.vue
@@ -0,0 +1,18 @@
+<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>
-- 
GitLab