商品详情: 交易按钮默认不显示

@@ -17,10 +17,12 @@
         <size-list class="select-content size-list" :list="list" :addSize="canAddSize" :selected="selectedSize"
                    @select="onSelectSize"
                    @add="onAdd" />
-        <div class="footer">
-          <cube-button v-if="config.type === 'sell'" @click="convertToCash" :class="{active: isMarketable}">变现<span> <i>¥</i>{{cashPrice}}</span></cube-button>
-          <cube-button @click="select" :class="{active: isTradable }">{{config.title}}</cube-button>
-        </div>
+        <transition name="slide-up">
+          <div class="footer" v-if="isTradable">
+            <cube-button v-if="config.type === 'sell'" @click="convertToCash" :class="{active: isMarketable}">变现<span> <i>¥</i>{{cashPrice}}</span></cube-button>
+            <cube-button @click="select" class="active">{{config.title}}</cube-button>
+          </div>
+        </transition>
       </div>
     </div>
   </action-sheet>
@@ -275,6 +277,7 @@ export default {
     justify-content: space-between;
 
     @include cube-ufo-btn;
+
     span {
       font-size: 28px;
 
@@ -284,4 +287,14 @@ export default {
       }
     }
   }
+  .slide-up-enter,
+  .slide-up-leave-to {
+    transform: translateY(60%);
+    opacity: 0;
+  }
+
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition: all 0.3s ease-in;
+  }
 </style>