新增购物车加入动画

components/default/RightBar.vue

@@ -661,13 +661,13 @@ i {
   right: 0;
   top: 60%;
   z-index: 200;
-  transition: all 0.5s cubic-bezier(0.49,-0.29,0.75, 0.14);
+  transition: all 0.4s cubic-bezier(0.49,-0.29,0.75, 0.14);
 }
 .ball .inner {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: rgb(0, 160, 220);
-  transition: all 0.5s linear
+  transition: all 0.4s linear
 }
 </style>

layouts/default.vue

@@ -3,7 +3,7 @@
     <header-view v-if="!isInFrame"></header-view>
     <nuxt/>
     <footer-view></footer-view>
-    <right-bar></right-bar>
+    <right-bar ref="rightBar"></right-bar>
   </div>
 </template>
 <script>
@@ -21,6 +21,14 @@
         title: this.title
       }
     },
+    created() {
+      this.$root.$on('add_cart', this.drop)
+    },
+    methods: {
+      drop(el) {
+        this.$refs.rightBar.drop(el)
+      }
+    },
     computed: {
       title () {
         let path = this.$route.path

layouts/shop.vue

@@ -15,7 +15,7 @@
     <nuxt/>
     <img v-if="isConsignment && !isInDetail" class="banner-img" src="/images/all/banner-consignment2.jpg" alt="" style="margin: 10px auto 30px;">
     <footer-view></footer-view>
-    <right-bar></right-bar>
+    <right-bar ref="rightBar"></right-bar>
   </div>
 </template>
 <script>
@@ -36,6 +36,9 @@
       MainHeader,
       MainNav
     },
+    created() {
+      this.$root.$on('add_cart', this.drop)
+    },
     head () {
       return {
         title: this.title,
@@ -45,6 +48,11 @@
         ]
       }
     },
+    methods: {
+      drop(el) {
+        this.$refs.rightBar.drop(el)
+      }
+    },
     computed: {
       title () {
         let path = this.$route.path

utils/文件说明.js

@@ -0,0 +1,4 @@
+// PC 端购物车小球动画
+
+// 加入购物车时间触发后，执行下面函数就可以了
+// this.$root.$emit('add_cart', event.target)