javascript - How to know if an element is rendered? -

my element has transition: transform .5s

then has separate class: transform: translatex(-100%)

so achieve initially, element positioned towards left. at window onload,when element rendered, remove transform class, , browser animate element correct position.

but happens when page becomes visible/rendered, element @ correct position. , there no animation.

i tried settimeout(function() {}, 0); doesn't work. if settimeout 1 second, works, sometime rendering takes long, , have settimeout 2 seconds. renders fast, , 2 seconds long time wait.

so overall, feel not reliable or correct way of doing this.

how can achieve want, correct way?

---

edit: sorry guys, after trying put demo, realized wasn't removing class @ window onload. because element , javascript , css loaded ajax. can happen before window onload or after window onload.

anyway, question is, if window takes long time load? possible element rendered before window finishes loading? or browsers render when entire window finishes loadings?

because want animate element possible. so, safe wait window onload, in case window takes long time load(images , slow connection, , stuff)?

and if load element ajax after window loads, run animation removing transform? or should detect when element rendered?

you might want try using combination of domcontentloaded event , requestanimationframe. domcontentloaded fires after document has been loaded , parsed before of images , other assets on page have completed downloading. requestanimationframe delay removal of class until after page has been painted element transition.

var box = document.getelementbyid('box'),     showbox = function (){       box.classlist.remove('offscreen');     }; document.addeventlistener("domcontentloaded", function(event) {     window.requestanimationframe(showbox); }); 

jsfiddle