getBoundingClientRect()来获取页面元素的位置”
获取的是一个对象;
延伸阅读;
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>