set tabbar position to fixed when transition done.

yst726 · Dec 12, 2016 · c830416 · c830416
1 parent fded5d6
commit c830416
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 10 deletions.
diff --git a/demo/components/tabbar/Discount.vue b/demo/components/tabbar/Discount.vue
@@ -2,11 +2,9 @@
   <div class="page" v-nav="{title: '折扣'}" v-tabbar-menu-index="1">
     <div class="page-content padding-top">
       <p class="text-center">Discount</p>
-
       <div class="item" v-for="($index, item) in items">
         discount item
       </div>
-
     </div>
   </div>
 </template>

diff --git a/demo/components/tabbar/Home.vue b/demo/components/tabbar/Home.vue
@@ -2,7 +2,6 @@
   <div class="page" v-nav="{title: '首页'}" v-tabbar-menu-index="0">
     <div class="page-content padding-top">
       <p class="text-center">Home Page</p>
-
       <div style="text-align: center; padding: 100px 40px">
         <md-button class="button button-assertive" @click="back()">
           返回组件列表页

diff --git a/demo/components/tabbar/PageFromTabbar.vue b/demo/components/tabbar/PageFromTabbar.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="page has-navbar" v-nav="{title: '另一个页面', showBackButton: true}">
-
     <div class="page-content padding padding-top">
       <p class="text-center">没错，我就是另一个页面</p>
     </div>

diff --git a/demo/components/tabbar/User.vue b/demo/components/tabbar/User.vue
@@ -2,7 +2,6 @@
   <div class="page has-navbar" v-nav="{title: '我的'}" v-tabbar-menu-index="3">
     <div class="page-content padding-top">
       <p class="text-center">User Info</p>
-
       <a class="button button-positive button-block button-clear" v-link="{ path: '/pageFromTabbar' }">去另一个页面</a>
     </div>
   </div>

diff --git a/src/services/tabbar/Tabbar.vue b/src/services/tabbar/Tabbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tabbar">
+  <div class="tabbar" :class="{'visible': state == 1}">
     <div v-for="($index, menu) in menus"
          class="tabbar-item"
          :style="{'color': menuIndex == $index ? activeMenuColor : menuColor}"
@@ -18,7 +18,6 @@
 </template>
 <style lang='scss'>
   @import "../../components/scss/mixins";
-
   $tabbar-z-index: 10;
 
   .tabbar {
@@ -33,10 +32,23 @@
     @include flex-wrap(wrap);
     margin: 0;
     padding: 0;
-
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+    /* 
     &:before {
       @include hairline(top);
     }
+    */
+
+    opacity: 0;
+    transition: opacity .2s;
+    -webkit-transition: opacity .2s;
+    &.visible {
+      opacity: 1;
+    }
+
+    &.fixed {
+      position: fixed;
+    }
 
     .tabbar-item {
       @include display-flex();
@@ -98,10 +110,18 @@
     data() {
       return {
         menus: [],
-        menuIndex: 0
+        menuIndex: 0,
+        state: 0
       }
     },
 
+    ready() {
+      this.show()
+      setTimeout(() => {
+        this.$el.classList.add('fixed')
+      }, 500)
+    },
+
     methods: {
       menuClicked(menuIndex) {
         window.__disable_nav_title_transition__ = true
@@ -116,6 +136,10 @@
 
       activate(index) {
         this.menuIndex = index
+      },
+
+      show() {
+        this.state = 1
       }
     },
 

diff --git a/src/services/tabbar/index.js b/src/services/tabbar/index.js
@@ -9,9 +9,10 @@ Vue.directive('tabbar', (data) => {
   let el = document.createElement('div')
   el.setAttribute('von-tabbar', '')
   document.body.appendChild(el)
+
   setTimeout(() => {
     _vm = new Vue(Object.assign({}, Tabbar, {
-      data: { menus: data.menus, menuIndex: 0 }
+      data: { menus: data.menus, menuIndex: 0, state: 0 }
     }))
   })
 })