js 原生apigetBoundingClientRect的使用

在做动画的时候遇到了一个问题，就是动画移动的位置不能写死，所以就需要动态获取dom的位置 来实现动画

getBoundingClientRect 这个方法可以获取元素的位置
打印返回结果是这个

拿到这个后 就可以计算出动画应该移动的位置

<div class="content">
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      @after-enter="afterEnter"
    >
      <div v-show="badgeShow" class="badge"></div>
    </transition>

  // 小球开场动画
    beforeEnter (el) {
      // 动画开始前  让小球到原来的位置
      el.style.transform = 'translate(0, 0)'
    },
    enter (el, done) {
      // 动态获取小球的横纵坐标
      const ballPos = el.getBoundingClientRect()
      // 动态获取徽标的横纵坐标【注意：这里获取徽标的位置，和双向数据绑定没有任何关系，所以，可以直接使用普通的DOM操作】
      // DOM操作的优势：不论要操作的元素属于哪个组件，只要这个元素属于document，那么就能够直接获取到
      const badgePos = document.querySelector('.van-info').getBoundingClientRect()
      const left = badgePos.left - ballPos.left
      const top = badgePos.top - ballPos.top
      el.offsetWidth
      // 动态设置 top 和 left 值
      el.style.transform = `translate(${left}px,${top}px)`
      // 设置小球的过渡效果  cubic-bezier是贝塞尔曲线  完成一个回弹效果
      el.style.transition = 'all .5s cubic-bezier(.46,-0.4,1,.49)'
      done()
    },
    // 动画结束后
    afterEnter (el, done) {
      this.badgeShow = !this.badgeShow
    },