demo

liangxiaojuan · Dec 24, 2016 · 1e52478 · 1e52478
1 parent 7e2759b
commit 1e52478
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 37 deletions.
diff --git a/src/components/cartControl/cartControl.styl b/src/components/cartControl/cartControl.styl
@@ -2,11 +2,28 @@
   font-size 0
   .cart-decrease, .cart-add
     display inline-block
-    padding 6px
-    line-height 24px
-    font-size 24px
-    vertical-align top
-    color rgb(0, 160, 220, 0.2)
+    padding 4px 6px 6px 6px
+    &.fade-enter-active, &.fade-leave-active {
+      transition: all 0.4s linear
+    }
+    &.fade-enter, &.fade-leave-active {
+      opacity: 0
+      transform translate3d(24px, 0, 0)
+    }
+    .inner
+      display inline-block
+      line-height 24px
+      font-size 24px
+      vertical-align top
+      color rgb(0, 160, 220, 0.2)
+      &.inner-enter-active, &.inner-leave-active {
+        transition: all 0.4s linear
+        transform: rotate(0)
+      }
+      &.inner-enter, &.inner-leave-active {
+        opacity: 0
+        transform  rotate(180deg)
+      }
   .cart-count
     display inline-block
     font-size 10px
@@ -16,33 +33,12 @@
     padding-top 6px
     text-align center
     color rgb(147, 153, 159)
-  .cart-decrease
-    padding 4px 6px 6px 6px
-    &.fade-enter-active
-      animation: bounce-in .5s;
-    &.fade-leave-active
-      animation: bounce-out .5s;
-    @keyframes bounce-in {
-      0% {
-        transform: scale(0);
-      }
-      50% {
-        transform: scale(1.5);
-      }
-      100% {
-        transform: scale(1);
-      }
-        transform  transition3D(0,0,0)
-    }
-    @keyframes bounce-out {
-      0% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.5);
-      }
-      100% {
-        transform: scale(0);
-      }
-    }
+  .cart-add
+    display inline-block
+    padding 6px
+    line-height 24px
+    font-size 24px
+    vertical-align top
+    color rgb(0, 160, 220, 0.2)
+
 
diff --git a/src/components/cartControl/cartControl.vue b/src/components/cartControl/cartControl.vue
@@ -1,9 +1,13 @@
 <template>
   <div class="cartControl">
     <transition name="fade">
-      <span class="iconfont icon-jian cart-decrease" v-show="food.count>0" @click="decreaseCart($event)"></span>
+        <div class="cart-decrease" v-show="food.count>0" @click="decreaseCart($event)">
+          <transition name="inner">
+          <span class="inner iconfont icon-jian"></span>
+          </transition>
+        </div>
     </transition>
-      <span class="cart-count" v-show="food.count > 0 ">
+     <span class="cart-count" v-show="food.count > 0 ">
       {{food.count}}
     </span>
     <span class="iconfont icon-jia cart-add" @click="addCart($event)"></span>
@@ -35,7 +39,7 @@
           // 去掉自带click事件的点击
           return;
         }
-          this.food.count--;
+        this.food.count--;
       }
     }
   };

diff --git a/src/components/goods/goods.vue b/src/components/goods/goods.vue
@@ -86,7 +86,17 @@
             return i;
           }
         }
+        return 0;
+      },
+      selectFoods() {
+        let foods = [];
+        this.goods.forEach((good) => {
+          good.foods.forEach((food) => {
+
+          })
+        })
       }
+
     },
     methods: {
       _initScroll() {