vue半场动画开发注意点

beforeEnter(el) {
  el.style.transform = "translate(0,0)";
},
enter(el, done) {
  let badgePosition  = document.getElementById("badge").getBoundingClientRect();
  let ballPosition  =this.$refs.ball.getBoundingClientRect();
  let y = badgePosition.top - ballPosition.top;
  let x= badgePosition.left - ballPosition.left;
  console.log(y,x);
  el.offsetWidth;
  el.style.transform = `translate(${x}px,${y}px)`;
  el.style.transition = "all .8s cubic-bezier(.4,-0.3,1,.68)";
  done();
},
afterEnter(el) {
  this.ballFlag = !this.ballFlag;
}

小球动画自适应宽高 getBoundingClientRect() 需要用到的方法