vue中作出購物車的功能

 效果展現：

一：html結構

<div id="buyButton" class="btn-buy">
        <button onclick="cartAdd(this,'/',1,'/shopping.html');" class="buy">當即購買</button>
         <button onclick="cartAdd(this,'/',0,'/cart.html');" class="add" ref="addToShopCartRef" @click="addToShopCart">加入購物車</button>
</div>

 

<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
      <div class="animateImg" v-if="isShowImg" ref="animateImgRef">
            <img width="100%" height="100%" :src="goods.imglist[0].thumb_path" alt="">
       </div>
</transition>

 

二：css樣式

<style scoped>
.animateImg {
  height: 40px;
  width: 40px;
  position: absolute;
  top: 20px;
  left: 20px;
  transition: all 1s;
}
</style>

 三：js部分

<script>
export default {
  data() {
    return {
      addToShopCartRefOffset: null, //獲取加入購物車的偏移量
      shopCartOffset: null,
      isShowImg: false
    };
  },
 
  mounted() {
    setTimeout(() => {
      this.addToShopCartRefOffset = $(this.$refs.addToShopCartRef).offset();
      this.shopCartOffset = $("#shopCartId").offset();
    }, 200);
  },

  methods: {
    // 加入購物車
    addToShopCart() {
      this.isShowImg = true;
      //   準備好載荷
      const goods = {
        goodsId: this.$route.params.goodsId,
        count: this.goodsCount
      };
      //   調用Vuex的mutations方法
      this.store.commit("addGoods", goods);
    },
    // 動畫相關,進入前的動畫
    beforeEnter(el) {
      // 設置動畫的起始位置
      el.style.left = `${this.addToShopCartRefOffset.left}px`;
      el.style.top = `${this.addToShopCartRefOffset.top}px`;
      el.style.transform = "scale(2)"
    },
    enter(el, done) {
      //刷新動畫幀
      el.offsetWidth;
      el.style.transform = "scale(0.5)";

      //設置進入階段結束的位置
      el.style.left = `${this.shopCartOffset.left}px`;
      el.style.top = `${this.shopCartOffset.top}px`;
      // ...
      done();
    },
    afterEnter(el) {
      this.isShowImg = false;
    }
  }
};
</script>

過渡&動畫的官方文檔：

https://vuejs.bootcss.com/v2/guide/transitions.html 

寫得很差，可是仍是要去吃飯的