title: How to know if an element is rendered?
body: <p>My element has <code>transition: transform .5s</code></p>
  
  <p>then it has a separate class: <code>transform: translatex(-100%)</code></p>
  
  <p>So what I would like to achieve is that initially, the element is positioned towards the left. <del>At window onload,</del>When the element is rendered, I remove the transform class, and the browser would animate the element back to its correct position.</p>
  
  <p>But what actually happens is that when the page becomes visible/rendered, the element is already at the correct position. and there is no animation.</p>
  
  <p>I tried <code>setTimeout(function() {}, 0);</code> it doesn't work. If I setTimeout for 1 second, it works, but sometime rendering takes long, and I have to setTimeout for 2 seconds. But then sometimes it renders fast, and 2 seconds is a long time to wait.</p>
  
  <p>So overall, I feel this is not a reliable or a correct way of doing this.</p>
  
  <p>How can I achieve what I want, the correct way?</p>
  
  <hr>
  
  <p>Edit:
  Sorry guys, after trying to put together a demo, I realized I wasn't removing the class at window onload. This is because my element and its javascript and css are loaded with AJAX. So it can happen before the window onload or after the window onload.</p>
  
  <p>Anyway, now my question is, what if the window takes a long time to load? Could it be possible that my element would be rendered before window finishes loading? Or does browsers only render when the entire window finishes loadings?</p>
  
  <p>Because I want to animate the element as soon as possible. So, is it safe to wait for window onload, in the case that window takes a long time to load(images and slow connection, and stuff)?</p>
  
  <p>And if I load the element with AJAX after the window loads, could I immediately run the animation by removing the transform? Or should I detect for when the element is rendered?</p>