Getboundingclientrect () to get the position of the page element "
Gets an object;
Extended reading;
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 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Document</title>6 <style>7 #w3124{8 width:100px;9 Height:100px;Ten background:#f45; One position:Absolute; A Left:100px; - } - #w3124. Totes-at-the-end{ the Top:200px; - } - #w3124. Animate-on-transforms{ - transition:all 1s; + - } + </style> A </Head> at <Body> - <DivID= "w3124"class=""> - - </Div> - <Script> - Console.log (document.getElementById ("w3124"). Getboundingclientrect ()); in varEl=document.getElementById ("w3124"); - functiontidyupanimations () { to Console.log (222) + } - //Get initial position the var First=El.getboundingclientrect (); * $ //assign a style to an element so that the element is in the final positionPanax Notoginseng El.classList.add ('Totes-at-the-end'); - the //Get final position + var Last=El.getboundingclientrect (); A the //Other styles can be calculated if necessary, but it is best to stick to only transform and opacity related calculations + varInvert=First.top-Last.top; - Console.log (invert); $ $ //reversal - El.style.transform= 'Translatey (' +Invert+ 'px)'; - the //wait until the next frame, that is, all other styles have been applied - Requestanimationframe (function() {Wuyi the //Add animation-Related Settings - El.classList.add ('animate-on-transforms'); Wu - //Start Animation About El.style.transform= "'; $ }, the); - - //clean up at the end - El.addeventlistener ('Transitionend', tidyupanimations); A </Script> + </Body> the </HTML>
Getboundingclientrect () to get the position of the page element "