vue实现加入购物车动画

预备基础

1. vue的动画和过渡钩子
2. css3的transform
3. 贝塞尔曲线

整体思路

1. 定义商品列表，设置点击的元素（点击后触发加入购物车的函数addToShopCart）注：这里要把$event传递过去，方便得到target
2. 定义一个component用来放购物车和运动的小球
3. 定义一个component用来放运动的小球，里面包含多个ball，并且要在这里定义ball的运动函数方便前面的点击调用

实践

1. 设置点击的元素

<!-- list.vue -->
<ul class="main">
  <li class="item" v-for="(item in commonityList)" :key="item.id">
    <span @click="addToShopCart($event, item)">点击添加</span>
  </li>
</ul>

2. 定义点击的函数，调用父组件的添加的方法（最终是调用购物车的drop）

// list.vue
export default {
  methods: {
    addToShopCart (event, item) {
      // 通知后台，回调成功后执行下面的函数
      this.$emit('add-to-cart', event.target)
    }
  }
}

3. 定义一个component用来放购物车和运动的小球

<!-- shop-cart.vue -->
<div class="shop-cart">
  <div class="cart">车</div>
  <shop-cart-balls ref="ball"></shop-cart-balls>
</div>

4. 定义drop方法，调用小球的drop，并给调用购物车组件的用

// shop-cart.vue
@import ShopCartBalls form 'shop-cart-balls.vue'
export default {
  methods: {
    drop (target) {
      this.$refs.ball.drop(target)
    }
  }
}

5. 定义运动的小球（引入到购物车的组件）

<!-- shop-cart-balls.vue -->
<div class="ball-container">
  <transition-group tag="div" @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
    <div class="ball" v-for="(item, index) in balls" :key="index" v-show="item.show" transition='drop'>
      <div class="inner inner-hook"></inner>
    </div>
  </transition-group>
</div>

6. 定义小球的动画函数

//shop-cart-balls.vue
export default {
  data () {
    return {
      balls: [
        {show: false},
        {show: false},
        {show: false}
      ]
    },
    dropBalls: []
  },
  methods: {
    drop (target) {
      for (var i = 0; i < this.balls.length; i++) {
        var ball = balls[i]
        if (!ball.show) {
          ball.show = true
          ball.el = target
          this.dropBalls.push(ball)
          return
        }
      }
    },
    beforeEnter (el) {
        let count = this.balls.length
        while (count--) {
          let ball = this.balls[count]
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect() // 获取小球的相对于视口的位移(小球高度)
            let x = -(window.innerWidth - rect.left - 126)
            let y = rect.top - 90 // 负数是从左上角往下的的方向, 正数是往上
            el.style.display = '' // 清空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-hook类来单纯被js操作
            inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`
            inner.style.transform = `translate3d(${x}px, 0, 0)`
          }
        }
    },
    enter (el, done) {
        /* eslint-disable no-unused-vars */
        let rf = el.offsetHeight // 触发重绘html
        this.$nextTick(() => {
          // 让动画效果异步执行,提高性能
          el.style.webkitTransform = 'translate3d(0, 0, 0)'
          el.style.transform = 'translate3d(0, 0, 0)'
          // 处理内层动画
          let inner = el.getElementsByClassName('inner-hook')[0] // 使用inner-hook类来单纯被js操作
          inner.style.webkitTransform = 'translate3d(0, 0, 0)'
          inner.style.transform = 'translate3d(0, 0, 0)'
          el.addEventListener('transitionend', done) // Vue为了知道过渡的完成，必须设置相应的事件监听器。
        })
    },
    afterEnter (el) {
        let ball = this.dropBalls.shift() // 完成一次动画就删除一个dropBalls的小球
        if (ball) {
          ball.show = false
          el.style.display = 'none' // 隐藏小球
        }
    }
  }
}

7. css里面定义小球的样式和贝塞尔曲线

/* shop-cart-balls.vue */
.ball-container {
  .ball {
    &.v-enter-active {
      /* 可以在上面的工具里跳出自己想要的曲线，调整参数 */
      transition: all .6s cubic-bezier(0.11, 0.92, 0.98, 0.75);
    }

    .inner {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #f00;
      transition: all .6s linear;
    }
  }
}

8. 在list的父组件里面引入列表和购物车组件

<div class="wrap">
  <commonity-list @add-to-cart="addToCart"></commonity-list>
  <div class="shopcart">
    <shop-cart ref="cart"></shop-cart>
  </div>
</div>

9. 定义addToCart函数，调用购物车的drop方法

import CommonityList from 'list.vue'
import ShopCart from 'shop-cart.vue'
export default {
  components: {
    CommonityList,
    ShopCart
  }，
  methods: {
    addToCart (target) {
      this.$refs.cart.drop(target)
    }
  }
}

参考

http://www.cnblogs.com/zaifeng0108/p/7226516.html

好了，本文写到这里就结束了，有问题欢迎留言和拍砖哦