Achieve "loaded elements appear in the view animation" This one effect (of course, a lot of use, but here I want to achieve the effect)
Do not waste your time, first on the reference documentation I solve the problem, I do not want to see friends directly: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
To achieve this effect, compared to my white front-end, of course, we need to use the power of big brother, but I found the article recommended Baidu above Gangster Maybe I was too chicken dish, try one after another no effect Well
Let's have a jquery, less than half a minute I looked into my heart only the word "finished", this is not my kind of white may be able to understand, only silently left no technical tears.
When I basically want to give up, I think this scenario is not needed when using lazy loading images into the thing, I immediately thought of this changed directions, no longer entangled in height view, page, elements, from (the key is too difficult ~ o (╥﹏╥) O)
For a clear direction on the situation in the immediate future, on the code:
// get the browser view height (also compatible with what looks like a "bull installment of" browsers) var viewHeightValue = document.documentElement.clientHeight || document.body.clientHeight;
Of course, before disoriented access a variety of information, I learned that this property is read-only, that is not going to change the dynamic,
Of course, as I certainly do not BUG Aberdeen (qian) phase (shou) letter (shi), then the code written inside a dead values directly, of course, did not use any eggs, the height of the browser I actually can a BUG Aberdeen change of moving?
Next to focus on:
// returns the element with respect to the distance view el.getBoundingClientRect ()
Relative to the distance browser view Oh, but there is a hint of the focus (Here is my take over from MDN (tou) Figure):
At that time I look at this chart a bit ignorant when forced to, so I added color to his own, hoping to relieve a little "·"
So: if I want to achieve the desired effect should be thinking is: get the browser view of the high (viewHeight) -> Gets the height of the element from view (elHeight) -> judgment (viewHeight - elHeight) is less than viewHeight, if you start implementation of animation;
perfect! ~
like! knock off! ~