获取一个组件的坐标值getBoundingClientRect()------小球动画效果

getBoundingClientRect()

    这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

 

var box=document.getElementById('box');         // 获取元素

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

 

注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

 

document.documentElement.clientTop;  // 非IE为0，IE为2

document.documentElement.clientLeft; // 非IE为0，IE为2

functiongGetRect (element) {

    var rect = element.getBoundingClientRect();

    var top = document.documentElement.clientTop;

    var left= document.documentElement.clientLeft;

    return{

        top    :   rect.top - top,

        bottom :   rect.bottom - top,

        left   :   rect.left - left,

        right  :   rect.right - left

    }

}

分别加上外边据、内边距、边框和滚动条，用于测试所有浏览器是否一致。

// 动态获取小球的横纵坐标

      const ballPos = el.getBoundingClientRect();

      // 动态获取徽标的横纵坐标【注意：这里获取徽标的位置，和双向数据绑定没有任何关系，所以，可以直接使用普通的DOM操作】

      // DOM操作的优势：不论要操作的元素属于哪个组件，只要这个元素属于document，那么就能够直接获取到

      const badgePos = document.getElementById("badge").getBoundingClientRect();

      const left = badgePos.left - ballPos.left;

      const top = badgePos.top - ballPos.top;

      // 动态设置 top 和 left 值

      el.style.transform = "translate(" + left + "px, " + top + "px)";

      // 设置小球的过渡效果

      // 贝塞尔曲线在线生成器： http://cubic-bezier.com/#.46,-0.4,1,.49

      el.style.transition = "all .5s cubic-bezier(.46,-0.4,1,.49)";

      // 当入场动画完成之后，需要手动调用一下 done 回调函数，直接跳过小球的出场动画