velocity实现抛物线动画

昨天看到了henry_chen 链接描述 写的小程序中的抛物线动画，当时作者还没发H5的版本，因此我就尝试自己去做一个。同时正好练习一下使用Velocity，所以就用了Velocity.js来实现。
第一次发文章和代码还望大家指点：

style

    .wrapper {
      position: relative;
      width: 200px;
      height: 500px;
      border: 1px solid #dedede;
    }

    .add {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background: greenyellow;
    }

    .ball {
      width: 10px;
      height: 10px;
    }

    .cart {
      position: absolute;
      bottom: 20px;
      left: 20px;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background: rgb(129, 214, 2);
    }

html

js

    var add = document.querySelector('.add');
    var wrapper = document.querySelector('.wrapper');
    var cart = document.querySelector('.cart');
    add.onclick = function (e) {
      var ball = document.createElement('div');
      wrapper.appendChild(ball)
      ball.id = "ball"
      ball.style.width = '10px';
      ball.style.height = '10px';
      ball.className = 'add';
      ball.style.top = e.pageY + 'px';
      ball.style.left = e.pageX + 'px';
      var ball = document.querySelector('#ball');

      Velocity(ball, {
        translateX: -add.offsetLeft + 10 + 'px'
      }, {
          duration: 800,
          easing: 'linear'
        })
      setTimeout(() => {
        Velocity(ball, {
          translateY: cart.offsetTop - 40 + 'px'
        }, {
            duration: 800,
            easing: 'ease-in',
            queue: false,
            complete: function () {
              wrapper.removeChild(ball);
              Velocity(cart, {
                scale: 1.1
              }, {
                  duration: 200,
                  complete: function () {
                    Velocity(cart,
                      'reverse'
                      , {
                        duration: 200
                      })
                  }
                })
            }
          });
      }, 0);
    }