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

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

ballFlag: false, // 控制小球的隱藏和顯示的識別符號

addToShopCar() {
      // 新增到購物車
      this.ballFlag = !this.ballFlag;
    },

beforeEnter(el) {
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
      el.offsetWidth;

      // 小球動畫優化思路：
      // 1. 先分析導致 動畫 不準確的 本質原因： 我們把 小球 最終 位移到的 位置，已經侷限在了某一解析度下的 滾動條未滾動的情況下；
      // 2. 只要解析度和 測試的時候不一樣，或者 滾動條有一定的滾動距離之後， 問題就出現了；
      // 3. 因此，我們經過分析，得到結論： 不能把 位置的 橫縱座標 直接寫死了，而是應該 根據不同情況，動態計算這個座標值；
      // 4. 經過分析，得出解題思路： 先得到 徽標的 橫縱 座標，再得到 小球的 橫縱座標，然後 讓 y 值 求差， x 值也求 差，得到 的結果，就是橫縱座標要位移的距離
      // 5. 如何 獲取 徽標和小球的 位置？？？   domObject.getBoundingClientRect()

      // 獲取小球的 在頁面中的位置
      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)";
      done();
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag;
    },