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

this.$nextTick(() => { // 使用$nextTick优化体验
this.$refs.shopCart.drop(target) // 父组件goods通过.$refs属性访问shopCart子组件的drop方法
})
},
handlecartAdd (target) { // 点击加号按钮触发事件
this._drop(target) // 调用_drop方法
}

5. shopCart.vue部分代码

①.定义一个数组，存放5个小球，这5个小球可以满足的动画的运行

②.动画分为两层，外层控制小球y轴方向和运动的轨道，内层控制x轴方向的运动

③.使用js动画钩子，vue在实现动画的时候提供了几个javascript钩子，可配合css动画一起使用，也可单独使用，因为购物车抛物线小球只有进入动画，没有离开的动画，所以enter的钩子有，before-enter,enter,after-enter,这些钩子需要在html属性中声明，然后在methods中使用这些方法

可参考以下官网

https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90

④.v-show控制盒子的显示和隐藏

html

  <!--购物车小球-->
  <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

data () {
 return { // 使用balls存放5个小球，这些小球的默认状态都是不显示的
  balls: [{show: false}, {show: false}, {show: false}, {show: false}, {show: false}],
  dropBalls: [] // 用dropBalls来存放掉落的小球
 }
}

在methods中定义方法

// 当触发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动画

// 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方向位移= 小球距离屏幕左侧的距离-外层盒子距离水平的距离								 
 2/3   首页 上一页 1 2 3 下一页 尾页