vue实现购物车抛物线小球动画效果的方法详解

<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>  <!--点击加号按钮，触发事件addCart，将事件对象作为参数传递-->  <div class="add iconfont" @click.stop.prevent="addCart($event)"></div></div>

// addCart事件addCart (event) {  if (!event._constructed) return // 检测事件派发是否来自于better-scroll  if (!this.food.count) {  // 当给一个观测对象添加一个它不存在的属性的时候，直接赋值是不可以的，需要使用Vue.set设置这个属性  Vue.set(this.food, 'count', 1)  } else {  this.food.count++  }  this.$emit('cart-add', event.target) // 向父组件触发一个自定义的cart-add事件，同时将事件对象传递给父组件},

<!--加减商品--><div class="cartControl-wrapper"> <!--在父组件监听到子组件触发的cart-add事件--> <cart-control :food="food" @cart-add="handlecartAdd"></cart-control></div>

_drop (target) { // 在goods.vue定义 _drop方法将cartcontrol的传递过来target对象再传递给shopCart  this.$nextTick(() => { // 使用$nextTick优化体验  this.$refs.shopCart.drop(target) // 父组件goods通过.$refs属性访问shopCart子组件的drop方法  })},handlecartAdd (target) { // 点击加号按钮触发事件  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个小球，这些小球的默认状态都是不显示的  balls: [{show: false}, {show: false}, {show: false}, {show: false}, {show: false}],  dropBalls: [] // 用dropBalls来存放掉落的小球 }}

// 当触发drop方法时小球开始掉落drop (el) {  for (let i = 0; i < this.balls.length; i++) { // 遍历这5个小球  let ball = this.balls[i]  if (!ball.show) { // 当小球显示状态为隐藏时   ball.show = true // 将这个小球的显示状态设置为true   ball.el = el  // 将cartControl传过来的对象挂载到ball的el属性上   this.dropBalls.push(ball) // 将这个小球放入到dropBalls数组中   return  }  }}

// js动画钩子// beforeenterhandleBeforeEnter: 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) // 负数，因为是从左上角向下   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)`  }  }},// enterhandleEnter: function (el, done) {  /* eslint-disable no-unused-vars */  // 触发浏览器重绘  let rf = el.offsetHeight  this.$nextTick(() => { // 让动画效果异步执行,提高性能  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为了知道过渡的完成，必须设置相应的事件监听器。它可以是transitionend或 animationend  })},handleAfterEnter: function (el) {  let ball = this.dropBalls.shift() // 完成一次动画就删除一个dropBalls的小球  if (ball) {  ball.show = false  el.style.display = 'none'  }},