VUE-使用 JavaScript 钩子实现购物车小球的半场动画

点击【加入购物车】，小球从隐藏到显示，按红线路程滑动到下方【0购物车】处，需要注意几个问题：

1、画面滚动时，小球的位置会发生变化，因此，在进入动画之前即beforeEnter（el）时，应该设置小球的位置坐标；

2、不能把小球的 横纵坐标 直接写死了，而是应该 根据不同情况，动态计算这个坐标值；

3、 先得到 徽标的 横纵 坐标，再得到 小球的 横纵坐标，然后 让 y 值 求差， x 值也求 差，得到 的结果，就是横纵坐标要位移的距离；

• 小球的样式如下：

 .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
  }

• 给小球添加transition动画

<transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
</transition>

•  JavaScript 钩子函数：

beforeEnter(el) {
      //动画入场之前，此时，动画还未开始，在此处设置元素开始动画之前的起始样式
      // 动态获取小球的top和left,因为滚动时，小球的位置会变化！！！
      el.style.left=this.$refs.numbox.getBoundingClientRect().left+'px';
      el.style.top=this.$refs.numbox.getBoundingClientRect().top+45+'px';
      el.style.transform = "translate(0, 0)";//起始样式
    },
enter(el, done) {
      //不写，没效果，强制刷新
      el.offsetWidth;
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      // 获取 徽标 在页面中的位置
      const badgePosition = document .getElementById("badge") .getBoundingClientRect();
      const xDist = badgePosition.left - ballPosition.left;
      const yDist = badgePosition.top - ballPosition.top;
      // 完成动画之后的结束状态
      el.style.transform = `translate(${xDist}px, ${yDist}px)`;
      // 过渡动画
      el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
      //当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
      done();
    },
afterEnter(el) {
      //动画结束之后的操作
      this.ballFlag = !this.ballFlag;
    },