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() 需要用到的方法