- 我们把 小球 最终 位移到的 位置,已经局限在了某 一分辨率下 滚动条未滚动的情况下
- 只要分辨率 和 测试的时候不一样,或者 滚动条 有一定的滚动的距离之后,问题就出现了;
- .因此,我们经过分析,得到结论:不能把 位置的横纵坐标 直接写死了,而是应该 根据不同情况,动态计算这个 坐标值;
- 经过分析,得出解题思路:先得到 购物车徽标 的横纵坐标,再得到 小球的 横纵坐标,然后让 y 值 求差,x 值也求差,就是横纵坐标要位移的距离;
- domObject.getBoundingClientRect() 这方法能得到某个DOM 对象,到最顶部和最左部的距离
在前边的文章中有一个vue用钩子函数实现半场动画;
enter(el, done) {
el.offsetWidth;
//获取小球在页面中的位置
var ballPosition = this.$refs.ball.getBoundingClientRect("ball");
// 获取 徽标 在页面中的位置
var badgePosition = document
.getElementById("badge")
.getBoundingClientRect("badge");
var xDist = badgePosition.left - ballPosition.left;
var yDist = badgePosition.top - ballPosition.top;
el.style.transform = `translate(${xDist}px, ${yDist}px)`;
el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
done(); //相当于aterEnter函数的引用
}