getBoundingClientRect()来获取页面元素的位置”

getBoundingClientRect()来获取页面元素的位置”

获取的是一个对象;

延伸阅读;

https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=403029188&idx=2&sn=1088e273b855b75815edb2e7977a0513&scene=0&key=710a5d99946419d988a823a3f76c4dabc336d68c1e192697aba3d5cdba0fce0f3dcb6b78a1934ce2f133ceeaab13180f&ascene=0&uin=MjY5MTA1NTUyNg%3D%3D&devicetype=iMac+MacBookAir7%2C2+OSX+OSX+10.10.5+build(14F1509)&version=11020012&pass_ticket=0TjAxgbmAwJ36hKBl6%2FKYh6xGq2b%2F%2BtEvMKL4mdzjFQTBk5DbaxNFQJwTuWK9VBv

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #w3124{
 8             width: 100px;
 9             height:100px;
10             background:#f45;
11             position: absolute;
12             left:100px;
13         }
14         #w3124.totes-at-the-end{
15             top: 200px;
16         }
17         #w3124.animate-on-transforms{
18             transition: all 1s;
19 
20         }
21     </style>
22 </head>
23 <body>
24 <div id="w3124" class="">
25 
26 </div>
27 <script>
28     console.log(document.getElementById("w3124").getBoundingClientRect());
29     var el = document.getElementById("w3124");
30     function tidyUpAnimations(){
31         console.log(222)
32     }
33 // 获取初始位置
34     var first = el.getBoundingClientRect();
35 
36     // 为元素指定一个样式，让元素在最终位置上
37     el.classList.add('totes-at-the-end');
38 
39     // 获取最终位置
40     var last = el.getBoundingClientRect();
41 
42     // 如果有必要也可以对其他样式进行计算，但最好坚持只进行 transform 和 opacity 相关的计算
43     var invert = first.top - last.top;
44     console.log(invert);
45 
46     // 反转
47     el.style.transform = 'translateY(' + invert + 'px)';
48 
49     // 等到下一帧，也就是其他所有的样式都已经被应用
50     requestAnimationFrame(function() {
51 
52         // 添加动画相关的设置
53         el.classList.add('animate-on-transforms');
54 
55         // 开始动画
56         el.style.transform = '';
57     },5000);
58 
59     // 结束时清理
60     el.addEventListener('transitionend', tidyUpAnimations);
61 </script>
62 </body>
63 </html>

 

posted @ 2016-04-07 00:11  挥刀  阅读(741)  评论(0)  编辑  收藏  举报