vue實現(xiàn)購物車拋物線小球動畫效果的方法詳解

<div class="cartControl">
  <transition name="move">
  <!--減少商品-->
  <div class="decrease " v-show="food.count>0" @click.stop.prevent="decreaseCart">
   <span class="inner iconfont"></span>
  </div>
  </transition>
  <!--增加商品-->
  <div class="count" v-show="food.count>0">{{food.count}}</div>
  <!--點擊加號按鈕，觸發(fā)事件addCart，將事件對象作為參數(shù)傳遞-->
  <div class="add iconfont" @click.stop.prevent="addCart($event)"></div>
</div>

// addCart事件
addCart (event) {
  if (!event._constructed) return // 檢測事件派發(fā)是否來自于better-scroll
  if (!this.food.count) {
  // 當給一個觀測對象添加一個它不存在的屬性的時候，直接賦值是不可以的，需要使用Vue.set設置這個屬性
  Vue.set(this.food, 'count', 1)
  } else {
  this.food.count++
  }
  this.$emit('cart-add', event.target) // 向父組件觸發(fā)一個自定義的cart-add事件，同時將事件對象傳遞給父組件
},

<!--加減商品-->
<div class="cartControl-wrapper">
 <!--在父組件監(jiān)聽到子組件觸發(fā)的cart-add事件-->
 <cart-control :food="food" @cart-add="handlecartAdd"></cart-control>
</div>

_drop (target) { // 在goods.vue定義 _drop方法將cartcontrol的傳遞過來target對象再傳遞給shopCart
  this.$nextTick(() => { // 使用$nextTick優(yōu)化體驗
  this.$refs.shopCart.drop(target) // 父組件goods通過.$refs屬性訪問shopCart子組件的drop方法
  })
},
handlecartAdd (target) { // 點擊加號按鈕觸發(fā)事件
  this._drop(target)  // 調用_drop方法
}

  <!--購物車小球-->
  <div class="ball-container">
  <div v-for="(ball,index) of balls" :key="index">
   <transition @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter">
   <div class="ball" v-show="ball.show" v-bind:css="false"><!--外層盒子-->
    <div class="inner inner-hook"></div> <!--內層盒子-->
   </div>
   </transition>
  </div>
  </div>

data () {
 return { // 使用balls存放5個小球，這些小球的默認狀態(tài)都是不顯示的
  balls: [{show: false}, {show: false}, {show: false}, {show: false}, {show: false}],
  dropBalls: [] // 用dropBalls來存放掉落的小球
 }
}

// 當觸發(fā)drop方法時小球開始掉落
drop (el) {
  for (let i = 0; i < this.balls.length; i++) { // 遍歷這5個小球
  let ball = this.balls[i]
  if (!ball.show) { // 當小球顯示狀態(tài)為隱藏時
   ball.show = true // 將這個小球的顯示狀態(tài)設置為true
   ball.el = el  // 將cartControl傳過來的對象掛載到ball的el屬性上
   this.dropBalls.push(ball) // 將這個小球放入到dropBalls數(shù)組中
   return
  }
  }
}

// js動畫鉤子
// beforeenter
handleBeforeEnter: function (el) {
  let count = this.balls.length 
  while (count--) {
  let ball = this.balls[count]
  if (ball.show) {
   let rect = ball.el.getBoundingClientRect() // getBoundingClientRect()獲取小球相對于視窗的位置，屏幕左上角坐標為0，0
   let x = rect.left - 32 // 小球x方向位移= 小球距離屏幕左側的距離-外層盒子距離水平的距離
   let y = -(window.innerHeight - rect.top - 22) // 負數(shù)，因為是從左上角向下
   el.style.display = ''
   el.style.webkitTransform = `translate3d(0,${y}px,0)` // 設置外層盒子，即小球垂直方向的位移
   el.style.transform = `translate3d(0,${y}px,0)`
   let inner = el.getElementsByClassName('inner-hook')[0]
   inner.style.webkitTransform = `translate3d(${x}px,0,0)` // 設置內層盒子，即小球水平方向的距離
   inner.style.transform = `translate3d(${x}px,0,0)`
  }
  }
},
// enter
handleEnter: function (el, done) {
  /* eslint-disable no-unused-vars */
  // 觸發(fā)瀏覽器重繪
  let rf = el.offsetHeight
  this.$nextTick(() => { // 讓動畫效果異步執(zhí)行,提高性能
  el.style.webkitTransform = 'translate3d(0, 0, 0)'// 設置小球掉落后最終的位置
  el.style.transform = 'translate3d(0, 0, 0)'
  let inner = el.getElementsByClassName('inner-hook')[0]
  inner.style.webkitTransform = 'translate3d(0, 0, 0)'
  inner.style.transform = 'translate3d(0, 0, 0)'
  el.addEventListener('transitionend', done) // Vue為了知道過渡的完成，必須設置相應的事件監(jiān)聽器。它可以是transitionend或 animationend
  })
},
handleAfterEnter: function (el) {
  let ball = this.dropBalls.shift() // 完成一次動畫就刪除一個dropBalls的小球
  if (ball) {
  ball.show = false
  el.style.display = 'none'
  }
},