diff --git a/example/App.vue b/example/App.vue
index 83a6c0b47ba0e765916fa9a17aa173d9c791dcbb..26788ed151222ad63fbf9f1fead02513965c9003 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 921689d278fa453bb3e632a7e52b37d3348e8b68..9c2c2fc656bca0a5d5db084e6353ed797d8068c4 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 0000000000000000000000000000000000000000..45c55a263b61fb1660b105957db32db081845e9c
--- /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>