Vue购物车小球动画适应滚动条不同位置和不同分辨率

1. 我们把 小球 最终 位移到的 位置，已经局限在了某 一分辨率下 滚动条未滚动的情况下
2. 只要分辨率 和 测试的时候不一样，或者 滚动条 有一定的滚动的距离之后，问题就出现了；
3. .因此，我们经过分析，得到结论：不能把 位置的横纵坐标 直接写死了，而是应该 根据不同情况，动态计算这个 坐标值；
4. 经过分析，得出解题思路：先得到 购物车徽标 的横纵坐标，再得到 小球的 横纵坐标，然后让 y 值 求差，x 值也求差，就是横纵坐标要位移的距离；
5. domObject.getBoundingClientRect() 这方法能得到某个DOM 对象，到最顶部和最左部的距离

在前边的文章中有一个vue用钩子函数实现半场动画；

 enter(el, done) {
      el.offsetWidth;

      //获取小球在页面中的位置
      var ballPosition = this.$refs.ball.getBoundingClientRect("ball");
      // 获取 徽标 在页面中的位置
      var badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect("badge");

      var xDist = badgePosition.left - ballPosition.left;
      var yDist = badgePosition.top - ballPosition.top;

      el.style.transform = `translate(${xDist}px, ${yDist}px)`;
      el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
      done(); //相当于aterEnter函数的引用
    }